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

VueJS: Getting values from multiple checkbox binding in textboxes

本文关键字：复选框 绑定 获取 文本 VueJS      更新时间：2023-09-26

我从Vue的文档中看到了一个简单的多个复选框的例子。每个选中的复选框的值被添加到绑定数组中，这很好。

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

这是一个例子。

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

N。B:我有一个非常大的形式和形式是动态生成的，这意味着我不能创建多个绑定/数据变量。我正在寻找一种基于主要checkedNames绑定的方法。

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

这应该是简单的，但我是新的Vue，所以我不知道如何做到这一点。

试试下面的代码，我对你的代码做了一些修改

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

相关文章：