Javascript 为什么v-model不能与数组和v-for循环一起工作？

我有一个自定义选择组件，它与一个简单的变量一起工作，但与v-for一起使用时，它将不起作用：

这项工作：

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

我在这里遗漏了什么？

v-model和v-for不能很好地结合在一起，如果v-model用于迭代别名w/a原语值

Vue警告：

您将v-model直接绑定到v-for迭代别名。这将 无法修改源数组的v-for，因为正在写入 别名类似于修改函数局部变量。考虑使用 对象数组，并在对象属性上使用v-model

因此，使用每个对象都具有select值属性的对象数组可以解决以下问题：

新Vue{ el:“应用程序”， 数据：{ 样本：0， 样本：[{value:0}，{value:0}，{value:0}] } }

---

我不喜欢必须更改视图模型来解决框架设计约束的想法。如果要通过API调用将模型发送到后端，该怎么办？这将涉及一个额外的步骤，必须改变模型

我的解决方案是创建一个Vue组件，将每个数组索引处的值放入一个对象中，该对象可以在其插槽中引用。然后，它通过监视程序在指定索引处更新数组，从而对数据更改做出反应

boxed-value.vue

范例

---

“Vue警告：”很有帮助，在Chrome控制台中找不到该警告，请在何处查找？谢谢

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

<template>
    <div>
        <slot v-bind:item="boxedItem"></slot>
    </div>
</template>

<script>
    export default {
        props: {
            array: {
                type: Array,
                required: true
            },
            index: {
                type: Number,
                required: true
            }
        },
        data() {
            var data = {
                boxedItem: {value: this.array[this.index]}
            }

            return data
        },
        created(){

        },
        watch: {
            'boxedItem.value': function(oldValue, newValue) {
                // console.log('Array item at index ' + this.index + ' value changed from ' + oldValue + ' to ' + newValue)
                this.array[this.index] = newValue
            }
        }
    }
</script>

<div v-for="(name, index) in primitiveValues" :key="index">
    <boxed-value :array="primitiveValues" :index="index">
        <template slot-scope="{item}">
            <el-input v-model="item.value"></el-input>
        </template>
    </boxed-value>
</div>