Vue v-model不适用于数组的单个索引

v-model 在 Vue.js 中用于实现双向数据绑定，它通常用于表单元素如 input、textarea 或 select 等，以便自动同步用户输入的数据和 Vue 实例中的数据。然而，v-model 并不直接支持数组的单个索引绑定，这是因为 Vue 的响应式系统设计时考虑的是对整个数组的操作，而不是单个元素的变更。

基础概念

Vue 的响应式系统通过使用 Object.defineProperty（Vue 2.x）或 Proxy（Vue 3.x）来追踪依赖关系。当数组被设置为响应式时，Vue 能够检测到数组整体的变化，比如通过索引赋值、push、pop 等方法，但对于直接通过索引修改数组元素的操作，Vue 2.x 并不能检测到这种变化。

类型与应用场景

在 Vue 中，通常有以下几种方式来处理数组的单个索引：

使用计算属性：创建一个计算属性来返回数组的特定索引，并在计算属性的 setter 中更新数组。
使用方法：定义一个方法来更新数组的特定索引，并在模板中调用这个方法。
使用 Vue.set 或 this.$set：在 Vue 2.x 中，可以使用 Vue.set 或 this.$set 方法来确保数组的变化能够被 Vue 的响应式系统检测到。

示例代码

使用计算属性

<template>
  <input v-model="itemAtIndex">
</template>

<script>
export default {
  data() {
    return {
      items: [1, 2, 3]
    };
  },
  computed: {
    itemAtIndex: {
      get() {
        return this.items[1]; // 假设我们要绑定索引为1的元素
      },
      set(value) {
        this.$set(this.items, 1, value); // 使用 Vue.set 更新数组
      }
    }
  }
};
</script>

使用方法

<template>
  <input :value="items[1]" @input="updateItem(1, $event.target.value)">
</template>

<script>
export default {
  data() {
    return {
      items: [1, 2, 3]
    };
  },
  methods: {
    updateItem(index, value) {
      this.$set(this.items, index, value);
    }
  }
};
</script>

遇到的问题及解决方法

如果你在使用 v-model 绑定数组的单个索引时遇到问题，可能是因为 Vue 没有检测到数组的变化。解决这个问题的方法是使用上述提到的 Vue.set 或计算属性。

在 Vue 3.x 中，由于使用了 Proxy，这个问题已经得到了解决，可以直接使用 v-model 绑定数组的单个索引。

<template>
  <input v-model="items[1]">
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const items = reactive([1, 2, 3]);
    return { items };
  }
};
</script>

总之，v-model 不适用于数组的单个索引是因为 Vue 的响应式系统设计时的考虑。在 Vue 2.x 中，可以通过计算属性或 Vue.set 方法来解决这个问题，在 Vue 3.x 中，这个问题已经被内建的 Proxy 解决。