Quiz: Zu früh

1<script setup>
2import { computed, onMounted, ref, useTemplateRef } from "vue";
3
4const menue = ref([]);
5const suche = ref("");
6const suchfeld = useTemplateRef("suchfeld");
7const angezeigt = computed(() => {
8    const suchtext = suche.value.toLowerCase();
9    return menue.value.filter((eintrag) =>
10        eintrag.name.toLowerCase().includes(suchtext),
11    );
12});
13
14suchfeld.value.focus();
15
16onMounted(async () => {
17    const antwort = await fetch("menue.json");
18    menue.value = await antwort.json();
19});
20</script>
21
22<template>
23    <h1>Café am Eck</h1>
24    <input ref="suchfeld" v-model="suche" placeholder="Speisekarte durchsuchen">
25    <ul>
26        <li v-for="eintrag in angezeigt" :key="eintrag.id">{{ eintrag.name }}: {{ eintrag.preis }} €</li>
27    </ul>
28</template>