Vue: v-for의 입력 배열에서 입력 변경에 대응

Vue: v-for의 입력 배열에서 입력 변경에 대응

초기 데이터 값을 설정하는 값의 배열이 있음list입력에서 배열 값을 렌더링하기 위해 이 목록을 사용한다.입력 값을 렌더링하는 중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>

오류는 값 대신 객체 배열을 사용하도록 지시하는 것이다.따라서 다음과 같이 수정할 수 있다.

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

참조URL: https://stackoverflow.com/questions/63386933/vue-reacting-to-input-change-on-array-of-inputs-in-v-for