Vuejs로 체크 된 값 저장

Question

나는 매우 간단한 Vue.js 코드를 여러 단계의 형식으로 가지고 있습니다. 사용자가 양식의 끝에 도달 할 때까지 일시적으로 값을 저장하려고합니다.

그러나 체크 박스 값 바인딩으로 일부 오류가 발생합니다.

나의 양식은 다음과 같습니다 :

<div v-for="item in items"> 
    <label class="form-check-label"> 
    <input type="checkbox" class="form-check-input" v-model="checkedItems" :value="item.id"> 
    {{ item.text }} 
    </label> 
</div> 

그리고 내 뷰 : 나는 항목을 클릭하면

new Vue({ 
    el: '#multistep-form', 
    data: { 
    items: [ 
     {id: 0, text: 'Item 1'} 
     {id: 1, text: 'Item 2'} 
     {id: 2, text: 'Item 3'} 
    ], 
    checkedItems: [], 
    } 
}); 

, 비어 체크 박스를 만드는 것입니다. 첨부 된 이미지에서 항목을 선택 취소하면 삭제됩니다. 이런 일이 왜

누구나 알고 나는 그것을 고칠 수있는 방법?

미리 감사드립니다.

Answer 1

배열을 v-model로 지정하면 배열의 인덱스 중 하나 여야합니다. 다음을 시도해보십시오.

<div v-for="(item, index) in items"> 
    <label class="form-check-label"> 
     <input type="checkbox" class="form-check-input" v-model="checkedItems[index]" :value="item.id">{{ item.text }} 
    </label> 
</div>