Pole v refu

Ref může obsahovat jakoukoli hodnotu: číslo, text, true nebo false, a taky pole. Objednávka v kavárně je seznam toho, co si zákazník vybral, takže je to pole v refu:

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

const objednavka = ref([]);

function pridejDoObjednavky(nazev) {
    objednavka.value.push(nazev);
}
</script>

<template>
    <button @click="pridejDoObjednavky('Espresso')">Espresso</button>
    <button @click="pridejDoObjednavky('Mátový čaj')">Mátový čaj</button>
    <p>Vaše objednávka: {{ objednavka.join(", ") }}</p>
    <p>Položek: {{ objednavka.length }}</p>
</template>

Klikněte na Espresso a pak na Mátový čaj a stránka ukáže Vaše objednávka: Espresso, Mátový čaj a Položek: 2. Ve skriptu je pole objednavka.value a push() do něj přidává. V šabloně je objednavka samotné pole, se svými metodami i length.

Vue vidí každou změnu pole, nejen novou hodnotu .value. Stránku aktualizuje tohle všechno:

• objednavka.value.push("Espresso") přidá položku na konec.
• objednavka.value.pop() odebere poslední položku.
• objednavka.value.splice(1, 1) odebere položky z libovolného místa pole: první číslo je index, kde začít, a druhé počet položek, které odebrat. Tohle odebere jednu položku, tu s indexem 1, tedy druhou. Využijete to v další lekci, kde každá položka objednávky dostane vlastní tlačítko Odebrat.
• objednavka.value = [] dá refu úplně nové pole, tady prázdné. Takhle se používají metody, které vytvoří nové pole a staré nechají, jak bylo, třeba filter(): objednavka.value = objednavka.value.filter((nazev) => nazev !== "Espresso");.

V další lekci taky ukážete každou položku ve vlastním prvku, místo abyste je spojili do jednoho textu.