Checkboxen

Eine Checkbox beantwortet eine Ja-oder-Nein-Frage, zum Beispiel, ob die Bestellung zum Mitnehmen ist. Mit v-model auf einem Ref, das true oder false enthält, ist die Checkbox angekreuzt, solange das Ref true ist, und ein Häkchen setzt das Ref auf true:

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

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

<template>
    <label>
        <input type="checkbox" v-model="zumMitnehmen">
        Zum Mitnehmen
    </label>
    <p>{{ zumMitnehmen ? "Im Pappbecher" : "In der Tasse" }}</p>
</template>

Mehrere Checkboxen können auch ein Array füllen. Gib jeder ihren eigenen value und allen dasselbe v-model, auf einem Ref, das ein Array enthält:

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

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

<template>
    <label>
        <input type="checkbox" value="milch" v-model="extras">
        Milch
    </label>
    <label>
        <input type="checkbox" value="zucker" v-model="extras">
        Zucker
    </label>
    <p>{{ extras.join(", ") }}</p>
</template>

Setze erst bei Zucker ein Häkchen, dann bei Milch, und extras ist ["zucker", "milch"]: die Werte der angekreuzten Boxen, in der Reihenfolge, in der sie angekreuzt wurden. Der Absatz zeigt zucker, milch. Nimm das Häkchen bei Zucker wieder weg, und er ist aus dem Array verschwunden. Es ist ein ganz normales Array, also funktioniert alles, was du über Arrays weißt: extras.length, extras.includes("milch"), extras.join(", ").

Typischer Fehler:

• Ein Ref, das nicht als Array beginnt, wie ref(""). Vue behandelt die Checkboxen dann als Ja-oder-Nein-Boxen: Ein Häkchen macht das Ref zu true, und alle sind auf einmal angekreuzt.