Quiz: Too Early

The search field should have the cursor in it when the page opens. Instead, the page is empty, and the console says TypeError: Cannot read properties of null (reading 'focus'). Click the line with the mistake.

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

const menu = ref([]);
const query = ref("");
const search = useTemplateRef("search");
const shown = computed(() => {
    const searchText = query.value.toLowerCase();
    return menu.value.filter((item) =>
        item.name.toLowerCase().includes(searchText),
    );
});

search.value.focus();

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

<template>
    <h1>Corner Café</h1>
    <input ref="search" v-model="query" placeholder="Search the menu">
    <ul>
        <li v-for="item in shown" :key="item.id">{{ item.name }}: €{{ item.price }}</li>
    </ul>
</template>
BackNext