javascript - 在 vue.js 中创建数组和多个文本输入之间的双向绑定(bind)

Question

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

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

这是一个 fiddle :https://jsfiddle.net/eywraw8t/122210/

想法是，当您在其中一个文本框中键入内容时，数组值(如下面的 fiddle 所示)也应该更新，但事实并非如此。

Answer 1

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

You are binding v-model directly to a v-for iteration alias. This will not be able to modify the v-for source array because writing to the alias is like modifying a function local variable. Consider using an array of objects and use v-model on an object property instead.

意思是，我们需要让 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>