Berechnete Werte

Manche Werte auf einer Seite sind keine eigenen Daten: Sie werden aus anderen Daten berechnet. Die Summe einer Bestellung ergibt sich aus den Preisen dessen, was in ihr steckt, und wenn sich die Bestellung ändert, muss sich auch die Summe ändern. Für solche Werte hat Vue berechnete Werte (englisch: computed values):

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

const tassen = ref(2);
const preis = computed(() => tassen.value * 3);
</script>

<template>
    <p>{{ tassen }} Tassen Kaffee kosten {{ preis }} €.</p>
    <button @click="tassen++">Noch eine</button>
</template>

Die Seite zeigt 2 Tassen Kaffee kosten 6 €. und nach einem Klick 3 Tassen Kaffee kosten 9 €. Du gibst computed() eine Funktion, die den Wert berechnet und zurückgibt. Vue führt die Funktion aus und merkt sich das Ergebnis. Wenn sich ein Ref ändert, das die Funktion liest, hier tassen, führt Vue sie erneut aus und aktualisiert die Seite. Du setzt preis nie selbst.

Ein berechneter Wert wird wie ein Ref verwendet. In der Vorlage schreibst du seinen Namen: {{ preis }}. Im Skript fügst du .value hinzu, auch innerhalb eines anderen berechneten Werts:

const mitTrinkgeld = computed(() => preis.value + 1);

Wie ref kommt auch computed von Vue, also muss es in der import-Zeile stehen: import { computed, ref } from "vue"; (in diesem Kurs stehen die Namen in alphabetischer Reihenfolge). Ohne das bleibt die Seite leer, und die Konsole zeigt ReferenceError: computed is not defined.

Die Funktion darf so lang sein, wie sie sein muss, mit Schleifen und Bedingungen, solange sie am Ende den Wert zurückgibt. Und sie ist nur dazu da, den Wert zu berechnen: Ein berechneter Wert lässt sich nicht ändern. preis.value = 10; ändert nichts, und die Konsole zeigt [Vue warn]: Write operation failed: computed value is readonly. Für einen anderen Preis änderst du das, woraus er gemacht ist, tassen.

In dieser Übung ist die Bestellung des Cafés ein Array von Artikeln mit einer anzahl. Ist ein Artikel schon in der Bestellung, addiert zurBestellungHinzufuegen() 1 zu seiner anzahl; sonst legt es den Artikel mit anzahl: 1 hinein.

Typische Fehler:

• .value im Skript vergessen: summe >= 10 vergleicht den berechneten Wert selbst, nicht die Zahl darin, und ist nie wahr.
• return vergessen: Die Funktion gibt dann nichts zurück, und die Seite zeigt an seiner Stelle nichts.