Vue：对 v-for 中输入数组的输入变化做出反应

Question

我有一个值数组，我将初始数据值list 设置为。我正在使用该列表在输入中呈现数组的值。我正在使用<input :value="element" /> 渲染v-for 中的输入值。我尝试使用v-model，但出现错误：

<input v-model="element">: You are binding v-model directly to a v-for iteration alias. This will not be able to modify the v-for source array because writing to the alias is like modifying a function local variable. Consider using an array of objects and use v-model on an object property instead.

    data() {
        let sizeFilterArray = this.$store.getters['main/getSizeFilters'];
        return {
            list: sizeFilterArray,
        }
    },

---

<draggable v-model="list">
   <div v-for="(element,index) in list" :key="index">
        <div class="element-box">
            <div class="element-input">
                <input :value="element" />
            </div>
        </div>
   </div>
</draggable>

Answer 1

错误指示您使用对象数组而不是值。所以，你可以修改为：

<draggable v-model="list">
   <div v-for="item in list" :key="item.id">
        <div class="element-box">
            <div class="element-input">
                <input v-model="item.value" />
            </div>
        </div>
   </div>
</draggable>

这假设您的 sizeFilterArray 是一个对象数组，例如 { id: 1, value: someValue }。