为什么v-model不能用于数组和v-for循环？

Question

我有一个自定义选择部件，它的工作原理与一个简单的变量，但是当用于V-它不会工作：

https://jsfiddle.net/7gjkbhy3/19/

<select2 v-for="item, index in samples" v-model="item" ></select2> 
data : { samples : [0, 0, 0]} 

这工作：

<select2 v-model="sample"></select2> 
data : { sample : 0} 

我在这里错过了什么？

Answer 1

v-model和v-for如果v-model被用于具有原始值的迭代别名，则不会很好地结合在一起。

的Vue公司警告说：

您直接结合v-model到v-for迭代别名。这将使 无法修改v-for源数组，因为写入 别名就像修改函数局部变量一样。考虑使用 对象数组，并改为在对象属性上使用v-model。

因此，使用对象的数组的每一个具有对于选择值的属性将解决此问题：

WORKING EXAMPLE。

<select2 v-for="item, index in samples" v-model="item.value" ></select2> 

new Vue({ 
    el: '#app', 
    data: { 
     sample: 0, 
     samples : [{ value: 0 }, { value: 0 }, { value: 0 }] 
    } 
})