Установка флажка, отмеченного флажком 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-модель к значению. Флажок будет проверен, если значение правдиво. В этом случае вы повторяете modules, и каждый module имеет свойство checked.

Следующий код будет связать флажок с этим свойством:

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

---

Обратите внимание, что я удалил v-bind:value="module.id". Вы не должны использовать v-model и v-bind:value на том же элементе. Из вю docs:

<input v-model="something"> 

это просто синтаксический сахар для:

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

Таким образом, с помощью v-model и v-bind:value, вы на самом деле в конечном итоге, v-bind:valueдважды, что может привести к неопределенному поведению.

Answer 2

Допустим, вы хотите передать подпорку к компоненту ребенка и опора является логическим, который будет определять, если флажок установлен или нет, то вы должны передать логическое значение в v-bind:checked="booleanValue" или короткий путь :checked="booleanValue", например:

<input 
    id="checkbox" 
    type="checkbox" 
    :value="checkboxVal" 
    :checked="booleanValue" 
    v-on:input="checkboxVal = $event.target.value" 
/> 

это должно работать и флажок будет отображаться флажком с его текущим логическим состоянием (если верно проверяются, если не сняты).