v-for循环中不能使用v-model来绑定数据

使用计算属性或者自定义组件来避免在 v-for 循环中使用 v-model。

示例：

<div v-for="(item, index) in list" :key="index">
  <input v-model="item.name">
</div>

如果我们需要在 v-for 循环中绑定数据，可以使用计算属性或者自定义组件来避免这个问题。

使用计算属性：

<div v-for="(item, index) in list" :key="index">
  <input :value="nameList[index]" @input="updateName(index, $event.target.value)">
</div>

<script>
export default {
  data() {
    return {
      list: [{name: 'Alice'}, {name: 'Bob'}, {name: 'Charlie'}],
    }
  },
  computed: {
    nameList() {
      return this.list.map(item => item.name)
    },
  },
  methods: {
    updateName(index, value) {
      this.list[index].name = value
    },
  },
}
</script>

使用自定义组件：

<template>
  <div>
    <div v-for="(item, index) in list" :key="index">
      <my-input v-model="item.name"></my-input>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [{name: 'Alice'}, {name: 'Bob'}, {name: 'Charlie'}],
    }
  },
  components: {
    'my-input': {
      template: '<input :value="value" @input="$emit(\'input\', $event.target.value)">',
      props: ['value'],
    },
  },
}
</script>