Vue.js でチェックボックスをチェック済みに設定する 質問する

Vue.js でチェックボックスをチェック済みに設定する 質問する

グーグルで検索して、知っているあらゆる組み合わせを試してみましたが、チェックボックスをチェック済みの状態で初期化することができません。

例:

<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
    },
]

チェックボックスのチェック状態を最初に設定するにはどうすればよいですか?

ベストアンサー1

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

次のコードは、チェックボックスをそのプロパティにバインドします。

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

この状況でv-modelがどのように機能するかについて詳しく知りたい場合は、次のリンクを参照してください。フォーム入力バインディングに関するドキュメント

おすすめ記事