Objekty v refu

Ref může obsahovat i objekt, který drží pohromadě věci, které k sobě patří. Tady je objednávka se jménem zákazníka a poznámkou:

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

const objednavka = ref({
    jmeno: "Anna",
    poznamka: "",
    polozky: ["Espresso"],
});

function pridejPoznamku() {
    objednavka.value.poznamka = "Bez cukru, prosím.";
}
</script>

<template>
    <p>{{ objednavka.jmeno }}: {{ objednavka.polozky.join(", ") }}</p>
    <p>Poznámka: {{ objednavka.poznamka }}</p>
    <button @click="pridejPoznamku">Bez cukru</button>
</template>

Ve skriptu je objednavka.value objekt a objednavka.value.poznamka jedna z jeho vlastností. Změňte vlastnost a Vue stránku vykreslí znovu, stejně jako když změníte samotné .value. Vue vidí i změny hlouběji uvnitř: objednavka.value.polozky.push("Mátový čaj") přidá položku do pole v objektu a stránka ji ukáže. V šabloně je to jako vždycky bez .value: objednavka.poznamka a objednavka.polozky.

V jiných návodech můžete narazit na další funkci Vue, reactive(). Udělá objekt reaktivním bez krabičky kolem, takže i ve skriptu píšete objednavka.poznamka:

import { reactive } from "vue";

const objednavka = reactive({ jmeno: "Anna", poznamka: "" });
objednavka.poznamka = "Bez cukru, prosím.";

Funguje ale jen pro objekty a pole, ne pro čísla nebo text, a starý objekt nemůžete nahradit novým. Proto tenhle kurz používá na všechno ref, jako to dělá mnoho vývojářů ve Vue.