Template Refs อ้างอิงถึงองค์ประกอบ DOM ใน VueJS

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

// กำหนดตัวแปร ref เพื่อไว้อ้างอิง element
// ชื่อจะต้องตรงกับที่กำหนดใน template
const input = ref(null)

// หลักจากทำการ moundtd และอัปเดท DOM แล้วถึงจะเรียกใช้งานได้
onMounted(() => {
  // กำหนดให้ทำการ focus ไปที ่DOM ที่อ้างอิงผ่าน ref
  input.value.focus()
})
</script>

<template>
  <input ref="input" />
</template>

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

const myInput = ref(null); // Template Reference
const text = ref(''); // Reactive Data

// Computed property to reverse the text
const reversedText = ref('');

// WatchEffect to reactively update reversedText
watchEffect(() => {
  reversedText.value = text.value.split('').reverse().join('');
  console.log(`Input value: ${text.value}`);
  if (myInput.value) {
    console.log(`Input DOM element value: ${myInput.value.value}`);
  }
});
</script>

<template>
  <input ref="myInput" v-model="text" type="text" />
  <p>{{ reversedText }}</p>
</template>

<input :ref="(el) => { /* กำหนดให้ el เป็น property หรือ  ref object */ }">

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

const is_unmounted = ref(false)
const text = ref('');
const reversedText = ref('');

// กำหนดเป็นคำสั่ง ไว้ใช้งาน
const setMyInput = (el) => {
  if (el) {
    // เมื่อ element ถูกกำหนด
    console.log('Input element is mounted:', el);
    el.focus(); // ทำการ focus ที่ input element
  } else {
    // เมื่อ element ถูกลบออก
    console.log('Input element is unmounted');
  }
};

// เมื่อทำการพิมพ์ข้อความใหม่เข้าไป ตรวจสอบการเปลี่ยนแปลง
// แล้วทำการ reverse ข้อความที่พิมพ์
watch(text, (newValue) => {
  reversedText.value = newValue.split('').reverse().join('');
});

// จำลองการถอน element ออกจาก dom เพื่อทดสอบการ unmounted
setTimeout(()=>{
  is_unmounted.value = true
},10000)
</script>

<template>
  <input v-if="!is_unmounted" :ref="setMyInput" v-model="text"  />
  <p>{{ reversedText }}</p>
</template>