在数组和多个文本输入之间在 vue.js 中创建双向绑定答案

【问题标题】：Create a two-way binding in vue.js between an array and multiple text inputs在数组和多个文本输入之间在 vue.js 中创建双向绑定
【发布时间】：2018-06-29 04:07:46
【问题描述】：

我的数据存储在一个数组中。对于每个数组项，表单中应该有一个文本输入。当用户输入其中一个文本输入时，应使用新值更新数组。

  <div class="form-group" v-for="synonym in row.synonyms">
    <input type="text" class="form-control" v-model="synonym" />
  </div>

这是一个小提琴：https://jsfiddle.net/eywraw8t/122210/

这个想法是，当您在其中一个文本框中键入时，数组值（如下所示）也应该更新，但它不会。

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

在检查控制台时，您会发现以下错误：

您将 v-model 直接绑定到 v-for 迭代别名。 这将无法修改 v-for 源数组，因为写入别名就像修改本地函数多变的。考虑使用对象数组并在一个对象上使用 v-model 而是对象属性。

意思是，我们需要给v-model 访问同义词及其索引的直接引用：

new Vue({
  el: "#app",
  data: {
    row: {
    	synonyms: [
      	"abc", 
        "def", 
        "ghj",
      ]
    }
  },
  methods: {

  }
})

body {
  font-family: 'Exo 2', sans-serif;
}

#app {
  margin: auto;
}

<div id="app">
  <h2>Items</h2>
  <div class="form-group" v-for="(synonym,i) in row.synonyms">
    <input type="text" class="form-control" v-model="row.synonyms[i]" />
  </div>
  
  <br>
  
  <h3>
  The text below should change if yout type inside the textboxes:
  </h3>
  
  <p>
  {{ JSON.stringify(row)}}
  </p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

【讨论】：

我还在学习 Vue，但我很确定你不希望 form-group 和 v-for 在同一个标签中。否则，您最终会得到多个表单组 div。如果我弄错了，我很高兴得到纠正。
@ultrageek - 在这里真的没关系，我通常将v-for 添加到父级，因为我在子级中多次使用内容（在本例中为row.synonyms[i]） ;这里实际上并不适用，因此您可以删除 div 并直接在输入上使用v-for。
循环功能无关紧要，但您希望表单组成为祖先，而不是 v-for 所在的位置。这就是我要指出的全部
@ultrageek - 表单组只是我编的一个类名，在这里完全无关紧要。它可以命名为foo，它仍然可以完成同样的事情。
Bootstrap 有它，我在阅读您的评论时正在使用它。所以我认为这就是你在做的事情。我的坏

【解决方案2】：

正确的做法是使用索引，vue.js 在循环中提供：

  <div class="form-group" v-for="(synonym, index) in row.synonyms">
    <input type="text" class="form-control" v-model="row.synonyms[index]" />
  </div>

https://jsfiddle.net/m14vd89u/1/

【讨论】：

该死，你打败了我

【解决方案3】：

这是 Vue.js 建议您使用索引(synonym, index) 执行此操作的方式：

https://vuejs.org/v2/guide/list.html

<div class="form-group" v-for="(synonym, index) in row.synonyms">
  <input type="text" class="form-control" v-on:blur="onItemsChanged(synonym)" v-model="row.synonyms[index]" />
</div>

如果你想用另一种方式来做，你可以引入一个方法v-on:blur：

new Vue({
  el: "#app",
  data: {
    row: {
        synonyms: [
        "abc", 
        "def", 
        "ghj",
      ]
    }
  },
  methods: {
    onItemsChanged (synonym) {
      // do something with array
    }
  }
})

【讨论】：