Funcția nextTick() în Vue 3 în Vue.js & Nuxt

Ce este nextTick() în Vue 3

În Vue, modificările de stare nu actualizează imediat nodurile DOM fizice, ci sunt grupate într-o coadă și executate asincron în următorul „tick”. Dacă modificați o variabilă și doriți să măsurați imediat înălțimea unui div sau să setați focusul pe un input nou apărut, await nextTick() garantează că DOM-ul a fost actualizat complet.

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

const arataInput = ref(false);
const inputRef = ref(null);

async function activeazaEditarea() {
    arataInput.value = true;
    // Așteptăm ca nodul DOM al input-ului să fie montat fizic
    await nextTick();
    inputRef.value.focus();
}
</script>