Quiz: Eine leere Seite
Diese Seite soll eine Bestellung mit zwei Artikeln zeigen, mit einem Button, der einen dritten hinzufügt. Aber die Seite bleibt ganz leer, und die Konsole meldet:
TypeError: Cannot read properties of undefined (reading 'length')
Klicke auf die Zeile mit dem Fehler.
1<script setup>
2import { ref } from "vue";
3
4const bestellung = ref(["Espresso", "Karottenkuchen"]);
5
6function zurBestellungHinzufuegen(name) {
7 bestellung.value.push(name);
8}
9</script>
10
11<template>
12 <h1>Café am Eck</h1>
13 <p class="bestellung">Deine Bestellung: {{ bestellung.join(", ") }}</p>
14 <p class="anzahl">Artikel: {{ bestellung.value.length }}</p>
15 <button @click="zurBestellungHinzufuegen('Pfefferminztee')">Pfefferminztee</button>
16</template>