Kvíz: Příliš brzy

Když se stránka otevře, měl by být kurzor v textovém poli pro hledání. Místo toho je stránka prázdná a konzole hlásí TypeError: Cannot read properties of null (reading 'focus'). Klikněte na řádek s chybou.

<script setup>
import { computed, onMounted, ref, useTemplateRef } from "vue";

const nabidka = ref([]);
const dotaz = ref("");
const hledani = useTemplateRef("hledani");
const zobrazene = computed(() => {
    const hledany = dotaz.value.toLowerCase();
    return nabidka.value.filter((polozka) =>
        polozka.nazev.toLowerCase().includes(hledany),
    );
});

hledani.value.focus();

onMounted(async () => {
    const odpoved = await fetch("nabidka.json");
    nabidka.value = await odpoved.json();
});
</script>

<template>
    <h1>Kavárna Na Rohu</h1>
    <input ref="hledani" v-model="dotaz" placeholder="Hledat v nabídce">
    <ul>
        <li v-for="polozka in zobrazene" :key="polozka.id">{{ polozka.nazev }}: {{ polozka.cena }} Kč</li>
    </ul>
</template>
ZpětDalší