vue v-for循环出来的数据动态绑定值问题

当使用Vue的v-for指令循环展示数据时，我们需要注意数据与状态的动态绑定问题。本文将详细讲解使用v-for指令循环展示数据时，因为数据改变而导致状态动态绑定的问题及解决方法。

问题现象

假设有如下一段v-for指令：

<div v-for="item in items">
  <input type="text" v-model="item.value">
</div>

此时，如果在JavaScript中修改items数组，例如删除一个元素，会发现该元素对应的文字框的值并没有删除。

原因分析

当使用v-for指令循环渲染数据时，Vue会为每一个循环元素创建一个独立的响应式实例。例如，上述代码中的item实际上是每个循环元素的副本，并不会影响原始数据源items的状态，因此也无法通过修改items数组来实现相应的值动态绑定。

解决方法

一种解决方法是在删除元素时，同时修改该元素所在的数组项的状态。例如，修改上述代码为：

<div v-for="(item, index) in items">
  <input type="text" v-model="item.value">
  <button @click="remove(index)">删除</button>
</div>

methods: {
  remove(index) {
    this.items[index].value = ''
    this.items.splice(index, 1)
  }
}

此时，删除元素时会同时清除其对应的value值，使得视图与数据源同步。

另一种解决方法是使用Vue提供的track-by特性，通过追踪每个对象对应的唯一标识符来实现状态动态绑定。例如，修改上述代码为：

<div v-for="item in items" :key="item.id">
  <input type="text" v-model="item.value">
  <button @click="remove(item)">删除</button>
</div>

data() {
  return {
    items: [
      { id: 1, value: 'item 1' },
      { id: 2, value: 'item 2' },
      { id: 3, value: 'item 3' }
    ]
  }
},
methods: {
  remove(item) {
    this.items.splice(this.items.indexOf(item), 1)
  }
}

此时，Vue会通过item.id来追踪每个对象的唯一标识符，实现状态的动态绑定。

示例说明

下面给出两个示例说明：

示例一

假设有如下数据源：

data() {
  return {
    items: [
      { id: 1, value: 'item 1' },
      { id: 2, value: 'item 2' },
      { id: 3, value: 'item 3' }
    ]
  }
}

当某个按钮被点击时，删除items中的第二个元素。

解决方法：

<div v-for="(item, index) in items" :key="item.id">
  <input type="text" v-model="item.value">
  <button @click="remove(index)">删除</button>
</div>

methods: {
  remove(index) {
    this.items[index].value = ''
    this.items.splice(index, 1)
  }
}

示例二