javascript - VueJS : Getting values from multiple checkbox binding in textboxes

Question

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

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

Here is an example of that.

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

注意:我有一个非常大的表单，并且该表单是动态生成的，这意味着我无法创建多个绑定(bind)/数据变量。我正在寻找一种仅基于主要 checkedNames 绑定(bind)工作的方法。

我想过添加 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)并循环它，以生成表单项目。