انتظار تحديث DOM بإستخدام nextTick

تغيير الحالة مش معناه إن DOM اتحدثت في نفس اللحظة وال nextTick بتنتظر تطبيق التحديث

المثال داخل مشروع Vue 3 يدعم ملفات SFC

تطبيق الفكرة

بنظهر الحقل وبعدها ننقل التركيز إليه

ملف App.vue

<script setup>
import { ref, nextTick } from "vue";
const visible = ref(false);
const field = ref(null);
async function showField() {
  visible.value = true;
  await nextTick();
  field.value.focus();
}
</script>

<template>
<label v-if="visible">Name <input ref="field"></label>
<button @click="showField">Show Input</button>
</template>

النتيجة

الحقل بيظهر وياخد التركيز بعد الضغط