Vue: реагирование на изменение ввода в массиве входных данных в v-for

#vue.js #vuejs2 #vuex

#vue.js #vuejs2 #vuex

Вопрос:

У меня есть массив значений, в который я устанавливаю начальное значение данных list . Я использую этот список для отображения значений массива во входных данных. Я отображаю значение входных данных в a, v-for используя: <input :value="element" /> . Я пытался использовать 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>
  

Ответ №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 } .

Комментарии:

1. Спасибо! Я преобразовал свой массив в серверной части в массив объектов, и это сработало! Спасибо!