v-model直接绑定v-for循环下的成员报错问题

话不多说，先贴出错误代码。

<div v-for="(item, index) in list" :key="index">
    // 直接绑定 v-for循环的item成员会报错
    <input v-model="item" />
</div>

这样乍看一眼好像没啥毛病，不要急，接下来我们看下报错提示。

翻译过来就是： 你正在将绑定v-for的循环别名绑定v-model，这样绑定无法修改v-for源数组因为写入别名就跟修改函数形参一样。考虑使用一个对象数组并在对象属性上使用v-model。

此时是不是还是觉得有点懵？其实通俗来讲就是修改迭代器变量item相当于修改函数的内部变量，不会影响输入参数本身(list）。

那怎么我们怎么修改呢？

报错提示中建议item使用一个对象，如果我们直接把list数组改成对象数组，那肯定是可以的，就是改动会比较大。换个思路, list数组本身也是个对象，直接把item替换成list[index]不就行了吗？

正确代码

<div v-for="(item, index) in list" :key="index">
    // 直接绑定 v-for循环的item成员会报错
    <input v-model="list[index]" />
</div>

记录一下这个问题，希望能帮到遇到同样问题的童鞋。