Vue 2.6.14循环内v-model值异常问题求助

使用Vue 2.6.14开发时，对对象数组进行循环并在循环内使用v-model实现用户动态增删数据，但增删后出现异常：填写某索引对应的对象字段时，其余对象的对应字段会同步显示相同值。期望不同行的输入内容相互独立，互不影响。

相关代码 #

HTML部分 #

<div id="app">
  <div class="row mb-3" v-for="(i, idx) in products" :key="idx">
    <div>
      <button @click="addRow" class="btn btn-small btn-primary">
      add
      </button>
      <button @click="removeRow(idx)" class="btn btn-small btn-danger">
      remove
      </button>
    </div>
    <div class="mb-3">
      <input v-model="products[idx].name" type="text" class="form-control" id="name" placeholder="name">
    </div>
      <div class="mb-3">
      <input v-model="products[idx].category" type="text" class="form-control" id="category" placeholder="category">
    </div>
  </div>
</div>

JavaScript部分 #

new Vue({
    el: '#app',
  data: function() {
    return {
      products: [{
        name: null,
        category: null
      }],
      product: {
        name: null,
        category: null
      }
    }
  },
  methods: {
    addRow: function(){
        this.products.push(this.product);
    },
    removeRow: function(index){
        this.products.splice(index, 1);
    }
  }
})

问题原因 #

1. 对象引用复用：addRow方法中直接将this.product对象推入数组，而对象是引用类型，数组中所有新增元素实际上指向同一个内存地址的对象，修改任意一个元素的字段，其他元素会同步变化。
2. v-for的key使用不当：用数组索引idx作为key，当数组元素增删后，Vue的虚拟DOM diff算法会错误地复用组件实例，导致输入值的渲染异常。

解决方案 #

1. 新增行时创建新对象实例 #

修改addRow方法，每次新增都创建一个独立的空对象，避免引用复用：

addRow: function(){
    // 每次创建新的对象实例
    this.products.push({
      name: null,
      category: null
    });
}

2. 给v-for设置唯一key #

为每个对象添加唯一标识（如id），并将其作为v-for的key，确保Vue能正确识别每个元素：

• 修改数据初始化和新增逻辑，添加唯一id：

data: function() {
  return {
    products: [{
      id: Date.now(), // 初始元素添加唯一id
      name: null,
      category: null
    }]
  }
},
methods: {
  addRow: function(){
      this.products.push({
        id: Date.now(), // 新增元素添加唯一id
        name: null,
        category: null
      });
  },
  removeRow: function(index){
      this.products.splice(index, 1);
  }
}

• 修改HTML中的v-for部分：

<div class="row mb-3" v-for="(item, idx) in products" :key="item.id">
  <div>
    <button @click="addRow" class="btn btn-small btn-primary">
    add
    </button>
    <button @click="removeRow(idx)" class="btn btn-small btn-danger">
    remove
    </button>
  </div>
  <div class="mb-3">
    <input v-model="item.name" type="text" class="form-control" placeholder="name">
  </div>
    <div class="mb-3">
    <input v-model="item.category" type="text" class="form-control" placeholder="category">
  </div>
</div>

修改后效果 #

修改后，新增的每一行都是独立的对象实例，填写任意行的输入框都不会影响其他行，增删操作也能正常渲染。

内容的提问来源于stack exchange，提问作者naticap