Quiz: The Plus Button

The customer chooses how many cappuccinos they want. The − button works, but + does nothing, and the console says [Vue warn]: Set operation on key "count" failed: target is readonly. Look at App.vue too, then click the line with the mistake in Quantity.vue.

1<script setup>
2defineProps({
3    count: { type: Number, required: true },
4});
5const emit = defineEmits(["less", "more"]);
6</script>
7
8<template>
9    <div class="quantity">
10        <button @click="emit('less')">−</button>
11        <span>{{ count }}</span>
12        <button @click="count++">+</button>
13    </div>
14</template>
15
16<style scoped>
17.quantity {
18    display: flex;
19    gap: 12px;
20    align-items: center;
21}
22
23button:disabled {
24    background: #b8b0a8;
25    cursor: default;
26}
27</style>

BackNext