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

Question

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

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

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

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