Флажки

Флажок отвечает на вопрос «да или нет», например, берёт ли посетитель заказ с собой. Если v-model стоит на рефе с true или false, флажок отмечен, пока реф равен true, а когда его отмечают, реф становится true:

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

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

<template>
    <label>
        <input type="checkbox" v-model="toGo">
        С собой
    </label>
    <p>{{ toGo ? "В бумажном стаканчике" : "В кружке" }}</p>
</template>

Несколько флажков могут заполнять и один массив. Дайте каждому своё value, а всем одинаковый v-model — на рефе с массивом:

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

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

<template>
    <label>
        <input type="checkbox" value="milk" v-model="extras">
        Молоко
    </label>
    <label>
        <input type="checkbox" value="sugar" v-model="extras">
        Сахар
    </label>
    <p>{{ extras.join(", ") }}</p>
</template>

Отметьте «Сахар», а потом «Молоко» — и extras станет ["sugar", "milk"]: значения отмеченных флажков в том порядке, в котором их отмечали. Абзац покажет sugar, milk. Снимите отметку с «Сахара» — и он пропадёт из массива. Это обычный массив, так что с ним работает всё, что вы знаете о массивах: extras.length, extras.includes("milk"), extras.join(", ").

Типичная ошибка:

• Реф, который не начинается как массив, например ref(""). Тогда Vue считает флажки флажками «да или нет»: отметка одного делает реф true, и отмечены сразу все.