Vue:如何将v-for生成的input框数据用v-model绑定到一个数组

最近小伙伴在写vue页面的时候发生了一个操作：

用v-for生成了多个input，然后他把input的数据用v-model双向绑定到了一个数组cur里面。

大概是这样写的

v-for ··········v-model="cur[index]"具体忘记了。v-for前是有index的。

cur:[],

然后一直报错cannot use in····。

然后到第二个值开始是输不出来的。

百度谷歌还有stackoverflow上找了好久发现很多人有这个问题，也有很多解决方法。。一一尝试之后没有发现有效的方法。

经过一番痛苦的思考，鬼使神差的让他把这个数组cur外面包了个对象。

即

a{

cur:[],

},

然后v-model绑定到a.cur[index]，然后居然绑定上去了。

问题是解决了····但是其中的原理呢。

于是开始了研究

首先排除了js本身的原因，写了这样的代码

发现是可以输出一样的东西。

也就是说这种机智和js是没什么关系的。

于是把问题锁定在了v-model的机制上。

去官方查了v-model的原理：

官方文档说了v-model就是个语法糖，其本质实现还是靠v-bind

给原生控件绑定事件,捕捉到原生组件的值,利用 $emit方法,触发input方法,组件监听到 input事件然后把值传给变量。

监听原生组件的事件,当获取到原生组件的值后把 值通过调用 $emit('input' ,data) 方法去触发 input事件 

你就可以看出来了。他的关键在于那个data.也就是每个item改变后，其实items是没有改变的。

所以我觉得每次v-bind之后的值是被弄到了data里面，但是data每次被重置成undefined了当运行到v-for的第二次循环时候，数组的0索引位置被重置了。

但我还是不知道为什么外面套个对象把数组作为这个对象的一个属性就行了。

————————————————
版权声明：本文为CSDN博主「TateBrwonJava」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/TateBrwonJava/article/details/80616074