Template Refs

Vue erzeugt die Elemente der Seite für dich, also brauchst du sie selten selbst. Manches lässt sich aber nur mit einem Element machen: den Cursor mit focus() in ein Textfeld setzen, zu ihm scrollen, ein Video starten. Dafür brauchst du das Element selbst, so wie du es im JavaScript-Kurs mit querySelector() bekommen hast.

In Vue markierst du das Element in der Vorlage mit dem Attribut ref und einem Namen deiner Wahl, und im Skript bekommst du es mit useTemplateRef() und demselben Namen:

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

const notiz = useTemplateRef("notiz");

onMounted(() => {
    notiz.value.focus();
});
</script>

<template>
    <label>
        Eine Notiz für den Barista
        <textarea ref="notiz"></textarea>
    </label>
</template>

notiz ist ein Template Ref: ein Ref, dessen .value das Element ist, hier die textarea selbst, mit allem, was du vom DOM kennst: focus(), value, classList … Wenn die App startet, steht der Cursor im Feld, und der Kunde kann sofort tippen. (In dieser Übung geht auch dein Cursor dorthin, wenn du auf „Ausführen“ klickst: Klicke in den Editor, um mit deinem Code weiterzumachen.)

Wann kannst du ihn benutzen? Erst, wenn die Komponente eingehängt ist. Davor gibt es das Element noch nicht, und notiz.value ist null. Deshalb steht focus() in onMounted. In einem Handler für ein Ereignis, etwa einen Klick, gibt es das Element auch: Ein Button lässt sich erst anklicken, wenn er auf der Seite ist.

Warum nicht document.querySelector("textarea")? Das durchsucht die ganze Seite und findet die erste textarea, die zu einer anderen Komponente gehören kann. Ein Template Ref ist immer das Element aus der Vorlage dieser Komponente.

useTemplateRef() gibt es erst seit Vue 3.5. In älterem Code siehst du const notiz = ref(null); zusammen mit ref="notiz", mit demselben Namen wie die Variable, und das funktioniert genauso.

Ein typischer Fehler: verschiedene Namen. Mit ref="notiz" in der Vorlage und useTemplateRef("notizen") im Skript bleibt notiz.value null, und notiz.value.focus() endet mit TypeError: Cannot read properties of null (reading 'focus').