Quiz: Bezahlen

1<script setup>
2import { computed, ref } from "vue";
3
4const bestellung = ref([
5    { id: 1, name: "Espresso", preis: 2, anzahl: 2 },
6    { id: 5, name: "Karottenkuchen", preis: 4, anzahl: 1 },
7]);
8const nachricht = ref("");
9
10const summe = computed(() => {
11    let gesamt = 0;
12    for (const artikel of bestellung.value) {
13        gesamt += artikel.preis * artikel.anzahl;
14    }
15    return gesamt;
16});
17
18function bezahlen() {
19    nachricht.value = `Danke! Du hast ${summe} € bezahlt.`;
20    bestellung.value = [];
21}
22</script>
23
24<template>
25    <h1>Café am Eck</h1>
26    <ul class="bestellung">
27        <li v-for="artikel in bestellung" :key="artikel.id">
28            {{ artikel.anzahl }}× {{ artikel.name }}
29        </li>
30    </ul>
31    <p>Gesamt: {{ summe }} €</p>
32    <button @click="bezahlen">Bezahlen</button>
33    <p class="nachricht">{{ nachricht }}</p>
34</template>