Vue.jsでチェックされたチェックボックスを設定する

Question

私が知っているすべての組み合わせでグーグルで遊んでいますが、自分のチェックボックスをチェックして初期化することができません。

例：

<ul class="object administrator-checkbox-list"> 
    <li v-for="module in modules"> 
     <label v-bind:for="module.id"> 
      <input type="checkbox" v-model="form.modules" v-bind:value="module.id" v-bind:id="module.id"> 
      <span>@{{ module.name }}</span> 
     </label> 
    </li> 
</ul> 

モジュールデータの例：

[ 
    { 
     "id": 1, 
     "name": "Business", 
     "checked": true 
    }, 
    { 
     "id": 2, 
     "name": "Business 2", 
     "checked": false 
    }, 
] 

は私が最初のチェックボックスのチェックをステータスを設定するために何ができますか？

Answer 1

チェックボックスの値を設定するには、v-modelを値にバインドする必要があります。値が真実ならチェックボックスがチェックされます。この場合、modulesを反復処理し、moduleはそれぞれcheckedプロパティを持ちます。

次のコードは、そのプロパティでチェックボックスをバインドします：私はv-bind:value="module.id"を削除

<input type="checkbox" v-model="module.checked" v-bind:id="module.id"> 

---

注意してください。同じ要素にv-modelとv-bind:valueを使用しないでください。

<input v-model="something"> 

がためだけ糖衣構文です：VUE docsからそう

<input v-bind:value="something" v-on:input="something = $event.target.value"> 

、v-modelとv-bind:valueを使用することにより、あなたは実際につながる可能性v-bind:value二回を有する終わります未定義の振る舞いに

Answer 2

、あなたが子コンポーネントに小道具を渡したいとしましょう、その小道具がチェックボックスがチェックされているかどうかを決定しますboolean型である、あなたはv-bind:checked="booleanValue"か短い道:checked="booleanValue"にブール値を渡す必要があり

これは機能するはずです。チェックボックスには、現在のブール状態（チェックされていない場合はチェックされている場合）のチェックボックスが表示されます。