Question

所以我在Vue的文档here中看到了一个简单的多个复选框示例。每个选中复选框的值都会添加到绑定数组中，这很好。

但是对于我正在构建的应用程序，我需要类似的功能，但我希望能够在相应的文本框中显示已选中复选框的值。

Here is an example of that.

我要找的是每个所选复选框的值应显示在其下方的相应文本框中。

N.B：我有一个非常大的表单，表单是动态生成的，这意味着我无法创建多个绑定/数据变量。我正在寻找一种基于主checkedNames绑定的方式。

我想添加v-model="checkedNames"但是它在所有文本框中添加了相同的值而不是上面的文本框。

这应该很简单，但我是Vue的新手，所以我无法弄清楚如何做到这一点。

Answer 1

尝试以下代码，我在代码中进行了一些更改

HTML

<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>

JS：

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）并循环它，以生成表单项。

VueJS：从文本框中的多个复选框绑定中获取值

1 个答案: