web-dev-qa-db-fra.com

Définir une case à cocher cochée avec Vue.js

J'ai essayé de googler et de jouer avec toutes les combinaisons que je connais, mais je ne parviens pas à initialiser mes cases à cocher.

Exemple:

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

Un exemple des données de modules:

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

Que puis-je faire pour définir initialement le statut coché des cases à cocher?

javascriptvue.js
21
Lovelock

Pour définir la valeur de la case à cocher, vous devez lier le v-model à une valeur. La case à cocher sera cochée si la valeur est véracité. Dans ce cas, vous parcourez modules et chaque module a une propriété checked.

Le code suivant liera la case à cocher avec cette propriété:

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

Notez que j'ai enlevé v-bind:value="module.id". Vous ne devriez pas utiliser v-model et v-bind:value sur le même élément. De la vue docs :

<input v-model="something">

est juste du sucre syntaxique pour:

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

Donc, en utilisant v-model et v-bind:value, vous finissez par avoir v-bind:value deux fois , ce qui pourrait provoquer un comportement indéfini.

33
asemahle

Supposons que vous souhaitiez transmettre un accessoire à un composant enfant et que cet accessoire est un booléen déterminant si la case à cocher est cochée ou non. Vous devez ensuite transmettre la valeur booléenne à la propriété v-bind:checked="booleanValue" ou le chemin le plus court :checked="booleanValue", par exemple:

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

Cela devrait fonctionner et la case à cocher affichera la case avec son état booléen actuel (si true cochée, si non cochée).

15
ricardoorellana