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> 

そして、私のVue：

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として指定します。ここで、配列は配列のインデックスの1つにする必要があります。以下を試してください：

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