"v-model" 为什么不能更新循环变量本身

先来看一个例子：

<template>
    <div>
        <div :key="index" v-for="(item, index) in array">
            <input v-model="item" type="text">
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                array: [{ name: "张三", age: 18 }, { name: "李四", age: 22 }]
            }
        }
    }
</script>

上述代码执行后会报一个错误：'v-model' directives cannot update the iteration variable itself ，意思是 'v-model' 不能更新循环变量本身。那么为什么会有这个问题，我们来分析一下：

首先使用 JavaScript 转换一下上面的代码块：

let array = [{ name: "张三", age: 18 }, { name: "李四", age: 22 }];
for (let item of array) {
  item = 123;
}
console.log(array) // [{ name: "张三", age: 18 }, { name: "李四", age: 22 }]

在上面的 for 循环中，变量 item 是在循环体内声明的，也就是 "内联" 变量，只是在循环中可以使用。

for (let item of array) {
  item = 123;
}
console.log(item) // item is not defined

我们修改 "内联" 变量其实是无效的，不会对 array 产生任何影响，当然 "v-model" 绑定要修改的值也是无效的。

想要修改成功的话我们可以更新一个对象，例如：

let array = [{ name: "张三", age: 18 }, { name: "李四", age: 22 }];
for (let item of array) {
  item.age = 20;
}
console.log(array) // [{ name: "张三", age: 20 }, { name: "李四", age: 20 }]

Vue 语法如下：

<template>
    <div>
        <div :key="index" v-for="(item, index) in array">
            <input v-model="item.age" type="text">
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                array: [{ name: "张三", age: 18 }, { name: "李四", age: 22 }]
            }
        }
    }
</script>

stackoverflow 上关于此问题的解释