Arrays in Refs

Eine Ref kann jeden Wert enthalten: eine Zahl, Text, true oder false und auch ein Array. Die Bestellung im Café ist eine Liste dessen, was der Kunde gewählt hat, also ein Array in einer Ref:

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

const bestellung = ref([]);

function zurBestellungHinzufuegen(name) {
    bestellung.value.push(name);
}
</script>

<template>
    <button @click="zurBestellungHinzufuegen('Espresso')">Espresso</button>
    <button @click="zurBestellungHinzufuegen('Pfefferminztee')">Pfefferminztee</button>
    <p>Deine Bestellung: {{ bestellung.join(", ") }}</p>
    <p>Artikel: {{ bestellung.length }}</p>
</template>

Klicke auf Espresso und dann auf Pfefferminztee, und die Seite zeigt Deine Bestellung: Espresso, Pfefferminztee und Artikel: 2. Im Skript ist das Array bestellung.value, und push() fügt etwas hinzu. In der Vorlage ist bestellung das Array selbst, mit seinen Methoden und seiner length.

Vue bemerkt jede Änderung des Arrays, nicht nur ein neues .value. Alle diese Aufrufe aktualisieren die Seite:

• bestellung.value.push("Espresso") fügt am Ende einen Eintrag hinzu.
• bestellung.value.pop() entfernt den letzten Eintrag.
• bestellung.value.splice(1, 1) entfernt Einträge von beliebiger Stelle im Array: Die erste Zahl ist der Index, bei dem es beginnt, die zweite, wie viele Einträge entfernt werden. Dieser Aufruf entfernt einen Eintrag, den zweiten. Du brauchst ihn in der nächsten Lektion, in der jeder Eintrag der Bestellung einen eigenen Entfernen-Button bekommt.
• bestellung.value = [] gibt der Ref ein ganz neues Array, hier ein leeres. So verwendest du Methoden, die ein neues Array erzeugen und das alte unverändert lassen, wie filter(): bestellung.value = bestellung.value.filter((name) => name !== "Espresso");.

Die nächste Lektion zeigt außerdem jeden Eintrag in einem eigenen Element, statt sie zu einem Text zusammenzufügen.