Zaškrtávací políčka

Zaškrtávací políčko odpovídá na otázku typu ano/ne, třeba jestli je objednávka s sebou. S v-model na refu, ve kterém je true, nebo false, je políčko zaškrtnuté, dokud je ref true, a zaškrtnutí udělá z refu true:

<script setup>
import { ref } from "vue";

const sSebou = ref(false);
</script>

<template>
    <label>
        <input type="checkbox" v-model="sSebou">
        S sebou
    </label>
    <p>{{ sSebou ? "V papírovém kelímku" : "V hrnku" }}</p>
</template>

Víc zaškrtávacích políček může plnit i jedno pole. Dejte každému vlastní value a všem stejný v-model na refu, ve kterém je pole:

<script setup>
import { ref } from "vue";

const prisady = ref([]);
</script>

<template>
    <label>
        <input type="checkbox" value="mléko" v-model="prisady">
        Mléko
    </label>
    <label>
        <input type="checkbox" value="cukr" v-model="prisady">
        Cukr
    </label>
    <p>{{ prisady.join(", ") }}</p>
</template>

Zaškrtněte Cukr, potom Mléko a v prisady je ["cukr", "mléko"]: hodnoty zaškrtnutých políček v pořadí, v jakém jste je zaškrtli. Odstavec ukáže cukr, mléko. Zrušte zaškrtnutí u Cukru a cukr z pole zmizí. Je to obyčejné pole, takže na něj funguje všechno, co o polích víte: prisady.length, prisady.includes("mléko"), prisady.join(", ").

Typická chyba:

• Ref, který nezačíná jako pole, třeba ref(""). Vue pak bere políčka jako otázky typu ano/ne: zaškrtnutí jednoho z nich udělá z refu true a zaškrtnou se všechna najednou.