VueJS:从文本框中的多个复选框绑定中获取值
VueJS:从文本框中的多个复选框绑定中获取值
提问于 2016-08-16 18:20:09
因此，我看到了一个来自Vue的Docs 这里的多个复选框的简单示例。将每个选中复选框的值添加到绑定数组中，这很好。
然而，对于我正在构建的应用程序，我需要类似的功能，但我希望能够在相应的文本框中显示复选框的值。
这就是一个例子。
我要找的是，每个选中的复选框的值都应该显示在相应的文本框中，就在它下面。
N.B:，我有一个非常大的表单，表单是动态生成的，这意味着我不能创建多个绑定/数据变量。我正在寻找一种基于主checkedNames绑定的工作方式。
我想添加v-model="checkedNames"，但它在所有文本框中都添加了相同的值，而不是上面的那个。
这应该很简单，但我对Vue并不熟悉，所以我想不出该怎么做。
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-08-16 18:32:14
尝试下面的代码，我在您的代码中做了一些更改
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames2">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames3">
<label for="mike">Mike</label>
<br>
<input type="text" v-model="checkedNames">
<input type="text" v-model="checkedNames2">
<input type="text" v-model="checkedNames3">JS
new Vue({
el: 'body',
data: {
checkedNames: [],
checkedNames2: [],
checkedNames3: []
}
});用于动态输入----您可以使用如下内容：
HTML：
<div v-for="n in numberOfInputs">
<input type="checkbox" name="jack{{n}}" id="jack{{n}}" value="Jack{{n}}" v-model="checkedNames[n]" >
<label for="jack{{n}}">Jack{{n}}</label>
<input type="text" v-model="checkedNames[n]">
</div>联署材料：
var testComponent = new Vue({
el: 'body',
data: {
checkedNames: [],
numberOfInputs: 5
},
methods: {
pageLoaded: function () {
for(i=0;i<this.numberOfInputs;i++)
{
this.checkedNames.push([]);
}
}
}
});
testComponent.pageLoaded()您可以循环表单输入数据数组，而不是v-for="n in 5"。您可以创建一个表单列表数组，并为每个项提供一个唯一的id(而不是n)并循环它，以生成表单项。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38981901
复制相关文章
相似问题
腾讯云开发者
