Template Refs — CompileDaily Study

Penjelasan

Template ref adalah cara mengakses elemen DOM langsung dari <script setup> — buat ref() dengan nilai awal null, pasangkan namanya ke atribut ref="..." di elemen HTML tujuan, dan Vue otomatis mengisi ref itu dengan elemen DOM aslinya setelah komponen mounted.

Contoh Konsep

<script setup>
import { ref, onMounted } from 'vue';

const inputRef = ref(null);

onMounted(() => {
    inputRef.value.focus(); // akses elemen DOM langsung
});
</script>

<template>
    <input ref="inputRef" type="text">
</template>

Praktikum

Buat komponen dengan input teks yang otomatis ter-focus saat komponen pertama kali muncul, memakai template ref dan onMounted().

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

Template ref hanya terisi SETELAH komponen selesai mounted — mengakses inputRef.value SEBELUM onMounted() (mis. langsung di top-level <script setup>) akan menghasilkan null, karena elemennya belum ada di DOM pada titik itu.