Question

我有一个列表，这些列表是通过v-for用v-model到数组创建的。我想将元素添加到数组，从而创建另一个输入字段。

到目前为止，一切正常。问题在于新输入字段都以某种方式都分配了相同的索引（？），或者发生了其他事情使它们显示相同的值。

我做了this 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>

用法： screenshot of what i'm getting

Answer 1

这里的问题是，使用array.push(declaredObject)时您要添加一个template的引用，因此每次更改都会反映在其所有引用中。

您必须添加具有相同属性的新对象，您可以通过多种方式实现这一点，其中更常见的是Object.assign({}, this.template)，而最新的是 Destructuring objects { 1}}。所以您的情况应该是{...this.template}

Answer 2

尝试

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

代替this.items.push(this.template)，因为template属性是反应性的，它将影响使用该属性的其他属性

选中此fiddle

向具有v模型的数组添加元素会导致重复

2 个答案: