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

Question

我有一个自定义的select组件，它对一个简单的变量有效，但当与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-model和v-for不能很好地配合使用。

Vue警告说：

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

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

。

<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 }]
     }
 })

Answer 2

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

我的解决方案是创建一个Vue组件，它将每个数组索引处的值装箱到一个对象中，该对象可以在它的插槽中引用。然后，它通过观察器更新指定索引处的数组，从而对数据更改做出反应。

boxed-value.vue

<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>