Quiz: Der Plus-Button
Der Kunde wählt, wie viele Cappuccinos er möchte. Der Button − funktioniert, aber + tut nichts, und die Konsole meldet [Vue warn]: Set operation on key "anzahl" failed: target is readonly. Sieh dir auch App.vue an und klicke dann in Menge.vue auf die Zeile mit dem Fehler.
1<script setup>
2defineProps({
3 anzahl: { type: Number, required: true },
4});
5const emit = defineEmits(["weniger", "mehr"]);
6</script>
7
8<template>
9 <div class="menge">
10 <button @click="emit('weniger')">−</button>
11 <span>{{ anzahl }}</span>
12 <button @click="anzahl++">+</button>
13 </div>
14</template>
15
16<style scoped>
17.menge {
18 display: flex;
19 gap: 12px;
20 align-items: center;
21}
22
23button:disabled {
24 background: #b8b0a8;
25 cursor: default;
26}
27</style>