Quiz: Die Bestellung verschwindet

1<script setup>
2import { ref } from "vue";
3
4const name = ref("");
5const bestellungen = ref([]);
6let naechsteId = 1;
7
8function bestellungHinzufuegen() {
9    bestellungen.value.push({ id: naechsteId, name: name.value });
10    naechsteId++;
11    name.value = "";
12}
13</script>
14
15<template>
16    <h1>Café am Eck</h1>
17    <form @submit="bestellungHinzufuegen">
18        <label for="name">Dein Name</label>
19        <input id="name" v-model.trim="name">
20        <button>Bestellen</button>
21    </form>
22    <ul class="bestellungen">
23        <li v-for="bestellung in bestellungen" :key="bestellung.id">
24            {{ bestellung.name }}
25        </li>
26    </ul>
27</template>