Vue 3 nextTick: Menunggu Render DOM dengan Aman

Vue 3 menyediakan sebuah fungsi bernama nextTick yang memungkinkan Anda untuk menunggu sampai Vue selesai melakukan rendering DOM sebelum menjalankan kode tertentu. Hal ini sangat berguna ketika Anda perlu memanipulasi DOM setelah perubahan data atau properti terjadi, tetapi Anda ingin memastikan bahwa DOM sudah siap.

Apa itu nextTick?

Fungsi nextTick adalah bagian dari API Vue yang memungkinkan Anda untuk mengeksekusi kode setelah Vue melakukan rendering dan pembaruan DOM. Dengan menggunakan nextTick, Anda memastikan bahwa DOM sudah siap dan tersedia untuk dimanipulasi.

Cara Menggunakan nextTick

Untuk menggunakan nextTick, Anda perlu mengimpor fungsi ini dari Vue. Berikut adalah contoh penerapan nextTick dalam Vue 3 dengan Composition API:

Contoh Kode Vue 3 dengan nextTick

const props = defineProps({

show: {

type: Boolean,

default: false

}

})

const searchInputRef = ref(null);

watch(() => props.show, async (newVal, oldVal) => {

if (newVal) {

await nextTick(() => {

searchInputRef.value.focus();

});

}

});

Penyebab Menggunakan nextTick

Dalam contoh di atas, kita menggunakan nextTick untuk memastikan bahwa input dalam modal mendapatkan fokus hanya setelah modal selesai dirender. Jika Anda mencoba untuk memberikan fokus pada input sebelum modal sepenuhnya ter-render, maka input tersebut tidak akan menerima fokus.

Berikut adalah cara kerja nextTick secara lebih mendalam:

• Vue akan memproses dan melakukan render ulang DOM ketika ada perubahan pada data atau props.
• Dengan nextTick, kita dapat menunda eksekusi kode kita hingga Vue selesai memperbarui DOM.
• Fungsi nextTick akan dipanggil setelah semua pembaruan DOM selesai dan akan mengaktifkan kode yang ingin dijalankan (seperti memberi fokus pada input).

Kesimpulan

Fungsi nextTick sangat berguna dalam Vue 3 untuk menunggu pembaruan DOM selesai sebelum menjalankan kode lain. Ini sangat bermanfaat ketika Anda bekerja dengan interaksi DOM, seperti memberikan fokus pada elemen input setelah modal muncul. Selalu pastikan untuk menggunakan nextTick ketika Anda membutuhkan kepastian bahwa DOM telah sepenuhnya ter-render sebelum melanjutkan logika lebih lanjut.