Question

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

undefined

这有效：

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

我在这里错过了什么？

Answer 1

如果将v-model用于具有原始值的迭代别名，则

v-for和v-model不能很好地结合在一起。

Vue警告：

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

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

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

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>

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

2 个答案: