Quiz: The Missing Button
The card should have the button Add at the bottom, in its footer. But the card shows only the heading and the price, and there's no error in the console. Click the line with the mistake in App.vue.
1<script setup>
2import { ref } from "vue";
3import MenuCard from "./MenuCard.vue";
4
5const ordered = ref(0);
6
7function addToOrder() {
8 ordered.value++;
9}
10</script>
11
12<template>
13 <p>Items in your order: {{ ordered }}</p>
14 <MenuCard>
15 <template #header>
16 <h2>Carrot Cake</h2>
17 </template>
18 <p>€4</p>
19 <template name="footer">
20 <button @click="addToOrder">Add</button>
21 </template>
22 </MenuCard>
23</template>