Quiz: The Order Disappears

A click on Order should add the name to the list of orders, but the list stays empty: after each click, the page starts over. Click the line with the mistake.

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

BackNext