Aktivieren eines Kontrollkästchens mit Vue.js

Question

Ich habe gegoogelt und mit jeder Kombination gespielt, die ich kenne, aber ich kann meine Kontrollkästchen nicht so aktivieren, dass sie aktiviert sind.

Beispiel:

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

Ein Beispiel für die Datenmodule:

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

Was kann ich tun, um anfänglich den geprüfte Status des Kontrollkästchen?

Answer 1

Um den Wert des Kontrollkästchens festzulegen, müssen Sie das V-Modell an einen Wert binden. Das Kontrollkästchen wird aktiviert, wenn der Wert truthy ist. In diesem Fall iterieren Sie über modules und jede module hat eine checked Eigenschaft.

Der folgende Code wird das Kontrollkästchen mit dieser Eigenschaft binden:

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

---

Beachten Sie, dass ich v-bind:value="module.id" entfernt. Sie sollten v-model und v-bind:value nicht für dasselbe Element verwenden. Vom vue docs:

<input v-model="something"> 

ist nur syntaktischer Zucker für:

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

Also, von v-model und v-bind:value verwenden, Sie am Ende tatsächlich v-bind:value mit zweimal, die dazu führen könnten zu undefiniertem Verhalten.

Answer 2

Angenommen, Sie möchten eine Stütze an eine untergeordnete Komponente übergeben und diese Stütze ist ein boolescher Wert, der bestimmt, ob das Kontrollkästchen aktiviert ist oder nicht, dann müssen Sie den booleschen Wert an v-bind:checked="booleanValue" oder den kürzeren Weg übergeben :checked="booleanValue", zum Beispiel:

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

das sollte funktionieren und das Kontrollkästchen wird das Kontrollkästchen angezeigt werden damit aktuellen boolean Zustand ist (wenn sie wahr geprüft, wenn nicht deaktiviert).