Setzen eines Kontrollkästchens wie bei Vue.js aktiviert

Ich habe gegoogelt und mit jeder Kombination gespielt, die ich kenne, aber ich kann meine Kontrollkästchen nicht als aktiviert initialisieren.

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

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

Was kann ich tun, um den aktivierten Status der Kontrollkästchen anfänglich festzulegen?

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

Der folgende Code bindet das Kontrollkästchen an diese Eigenschaft:

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

Wenn Sie mehr darüber erfahren möchten, wie v-model in dieser Situation funktioniert, finden Sie hier einen Link zu die Dokumentation über Form Input Binding.

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 die übergeben v-bind:checked="booleanValue" oder den kürzeren Weg :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 zeigt das Kontrollkästchen mit seinem aktuellen booleschen Zustand an (wenn wahr aktiviert, wenn nicht deaktiviert).

Im v-Modell ist der Wert der Eigenschaft möglicherweise kein strikter boolescher Wert und das Kontrollkästchen erkennt den Wert möglicherweise nicht als aktiviert/deaktiviert. Es gibt eine nette Funktion in VueJS, um die Umwandlung in wahr oder falsch vorzunehmen:

<input
  type="checkbox"
  v-model="toggle"
  true-value="yes"
  false-value="no"
>

Ich hatte ähnliche Anforderungen, aber ich wollte nicht verwenden v-model um den Zustand in der übergeordneten Komponente zu haben. Dann habe ich das zum Laufen gebracht:

<input
  type="checkbox"
  :checked="checked"
  @input="checked = $event.target.checked"
/>

Um den Wert vom übergeordneten Element weiterzugeben, habe ich hier eine kleine Änderung vorgenommen und es funktioniert.

<input
  type="checkbox"
  :checked="aPropFrom"
  @input="$emit('update:aPropFrom', $event.target.checked)"
/>

Ich hatte dieses Problem und konnte einige Stunden lang keine Lösung finden, bis mir klar wurde, dass ich falsch lag prevented native Ereignisse aus auftreten mit:

<input type="checkbox" @click.prevent="toggleConfirmedStatus(render.uuid)"
    :checked="confirmed.indexOf(render.uuid) > -1"
    :value="render.uuid"
/>

entferne den .prevent von dem @click Handler hat mein Problem behoben.

<input v-if = "module.checked == true" checked type="checkbox" >
<input v-else-if = "module.checked == false"  type="checkbox" >

Ich habe das mit v-if und v-else-if gelöst

Ich verwende sowohl versteckte als auch Kontrollkästchen-Eingaben, um sicherzustellen, dass entweder 0 oder 1 an das Formular gesendet werden. Stellen Sie sicher, dass die Feldnamen identisch sind, damit nur eine Eingabe an den Server gesendet wird.

<input type="hidden" :name="fieldName" value="0">
<input type="checkbox" :name="fieldName" value="1" :checked="checked">