<div class="container-body" v-for="index in 10" :key="index">
<div class="container-content"></div>
<div class="container-content">
<input :id="'Row'+index+'-input1'" type="text">
</div>
<div class="container-content">
<input :id="'Row'+index+'-input2'" type="text" class="disabled">
</div>
<div class="container-content">
<div class="custom-control custom-checkbox">
<input :id="'Row'+index+'checkbox'" class="form-check-input" type="checkbox" disabled>
</div>
</div>
<div class="container-content delete">
<img/>
</div>
</div>
我将使用v-for有10个输入行。
我需要做到:当用户在Row 1-input 1上输入数字时,将启用Row 1-input 2和Row 1-复选框。输入使能不应影响其他9行。此外,当我单击删除div时,它应该清除整行值。
我不知道如何在Vue中实现这一点。我应该创建10个数据变量,并保存值onkeyup,并使用它绑定:禁用?或者有什么Vue方法可以实现这一点?
3条答案
按热度按时间h4cxqtbf1#
下面是一种方法:
e1xvtsh32#
我认为最好的方法是为一行代码创建一个组件,您可以在其中放置用于处理一个示例的所有逻辑。然后创建所需数量的此类组件。
下面是你的任务的一个示例实现,如果我理解正确的话:
zbq4xfa03#
您需要找到输入的唯一性。
正如我之前所说,你可以把输入设为
:value
或v-model
。然后将每个字符串和索引连接起来,以形成唯一的输入。
在这样做的时候,你需要返回一个
array
类型的输入v模型NOTastring
类型。这是因为,我们需要使用字符串和索引进行连接。
所以我们可以像这个v模型一样
对于输入1
对于输入2
现在我们可以访问行输入了。
我们可以将它与
disabled
和delete
函数一起使用。演示