2

我有一个通过 v-for 创建的文本输入字段列表和v-model一个数组。我想向数组中添加元素，从而创建另一个输入字段。

到目前为止一切正常。问题是新的输入字段不知何故都被分配了相同的索引（？），或者发生了其他事情导致它们显示相同的值。

我制作了这个 jsfiddle来展示我的意思。如果您按下按钮两次，然后尝试编辑其中一个新输入框，则所有新输入框都将获得编辑后的值。我只希望编辑后的输入框显示输入值。

我想我在这里忽略了一些东西。请问有人可以帮忙吗？

Javascript：

new Vue({
  el: '#app',
  data: {
    items: [{name: "one", id: 0}],
    template: {
        name: "two",
        id: 2,
    },
  },
   methods: {
    addRow: function(){
    this.items.push(this.template);
    this.items[this.items.length - 1].id = Math.random();
    }
  }
  })

HTML：

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <div v-for="(item,index) in items" :key="item.id">
  <input v-model="item.name">
  </div>
  <button v-on:click="addRow">
  Add row
  </button>
  <div>Array content: {{items}}</div>
</div>

用法： 我得到的截图

4

2 回答 2

8

The problem here is that with array.push(declaredObject) you are adding a reference of template so every change will be reflected in all its references.

You must add a new object with the same properties, you can achieve that in many ways, the more common is Object.assign({}, this.template) and the newest one is Destructuring objects {...this.template}. so in your case It should be this.items.push({...this.template})

于 2018-11-22T19:22:40.197 回答
2

尝试

   this.items.push({
            name: "two",
             id: 2,
           });

而不是this.items.push(this.template)因为template属性是反应性的，它会影响使用它的其他属性

检查这个小提琴

于 2018-11-22T18:53:40.720 回答