Vypočítané hodnoty

Některé hodnoty na stránce nejsou samostatná data, ale počítají se z jiných dat. Cena objednávky vychází z cen toho, co v ní je, a když se objednávka změní, musí se změnit i cena. Pro takové hodnoty má Vue vypočítané hodnoty (anglicky computed):

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

const salky = ref(2);
const cena = computed(() => salky.value * 55);
</script>

<template>
    <p>Káva: {{ salky }}×, celkem {{ cena }} Kč</p>
    <button @click="salky++">Ještě jednu</button>
</template>

Stránka ukáže Káva: 2×, celkem 110 Kč a po kliknutí Káva: 3×, celkem 165 Kč. Do computed() dáte funkci, která hodnotu vypočítá a vrátí. Vue ji spustí a výsledek si zapamatuje. Když se změní ref, který funkce čte, tady salky, Vue ji spustí znovu a stránku aktualizuje. Hodnotu cena nikdy nenastavujete sami.

Vypočítaná hodnota se používá stejně jako ref. V šabloně napíšete její název: {{ cena }}. Ve skriptu přidáte .value, i uvnitř jiné vypočítané hodnoty:

const seSpropitnym = computed(() => cena.value + 10);

Stejně jako ref pochází computed z Vue, a tak musí být v řádku s import (názvy v něm píšeme v abecedním pořadí): import { computed, ref } from "vue";. Bez toho zůstane stránka prázdná a konzole ukáže ReferenceError: computed is not defined.

Funkce může být tak dlouhá, jak potřebuje, s cykly i podmínkami, jen musí na konci hodnotu vrátit. A slouží jen k výpočtu: vypočítanou hodnotu změnit nejde. cena.value = 200; nic nezmění a konzole ukáže [Vue warn]: Write operation failed: computed value is readonly. Když chcete jinou cenu, změňte to, z čeho se počítá, tedy salky.

Objednávka kavárny je v tomto cvičení pole položek s počtem kusů pocet. Když už položka v objednávce je, pridejDoObjednavky() jí zvýší pocet o 1, jinak ji do objednávky přidá s pocet: 1.

Typické chyby:

• Chybějící .value ve skriptu: celkem >= 200 porovnává samotnou vypočítanou hodnotu, ne číslo v ní, a nikdy neplatí.
• Chybějící return: funkce pak nic nevrátí a stránka na jejím místě nic neukáže.