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模型对象属性。

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

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

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

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

3 个答案: