Apa yang sebenarnya terjadi di balik layar v-model VueJS

VueJS. Image from (https://www.turing.com/blog/the-basics-of-vue-js-you-need-to-know/)

Kali ini saya akan mencoba memberikan pemahaman mendasar konsep v-model di VueJS untuk yang baru mulai belajar Vue. Saya menulis tulisan ini berdasarkan dari pengalaman pribadi saya sendiri. Di awal belajar Vue di akhir tahun 2018, saya kesulitan memahami v-model itu apa. Baru beberapa tahun kemudian saya paham fungsi dan kegunaannya.

Konsep v-model di Vue ini sebenarnya sangat dasar. Memang butuh waktu untuk betul-betul paham betapa powerful nya v-model ini di Vue.

Di akhir tulisan ini, harapannya kamu bisa lebih tau apa itu v-model beserta penggunaannya, dan gimana cara pakai di project kamu.

Apa itu Vue v-model?

Vue v-model adalah sebuah directive yang bisa kita pakai di template code kita. Terus, directive itu apa?

Secara harfiah, directive itu artinya pengarahan; yang menunjuk.

Secara konteks di Vuejs, directive adalah atribut khusus (di Vue, diawali dengan v- ) yang fungsi nya sebagai ekspresi atribut javascript untuk mengelola DOM.

Terus DOM itu apa? Sebagai front-end developer, saya rasa kita harus paham DOM itu apa. Saya gak akan bahas di sini. Kamu baca sendiri di web ini.

Dalam kasus directive v-model, directive ini istilahnya nyuruh si Vue Instance untuk bikin two-way data binding antara dua value dari template (dua component) untuk kemudian di simpan di data properties dari child component.

Masih bingung?

Coba, ya. Kita bikin satu contoh simple v-model.

<template>
  <div>
    <input type='text' v-model='value' />
    <p> Value: {{ value }} </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "Halo, VueJS"
    }
  }
}
</script>

Hasilnya begini:

v-model berhasil

Perfect.

Cara kerja v-model

Kebanyakan orang (termasuk saya, dulu) akan stop di contoh itu tanpa mencari tahu lebih apa yang sebenarnya terjadi di v-model itu.

Untuk kamu yang mau tau kenapa input value nya berubah secepat itu, saya coba jelaskan lebih dalam.

Yang terjadi sebenarnya di dalam v-model , jika kita convert element input ini, maka kode ini (kita sebut baris 1):

<input type='text' v-model='value' />

Di balik layar, Vue akan merubahnya ke dalam bentuk ini (kita sebut baris 2):

<input: value="value" @input=" x => value = x.target.value" />

Penjelasannya begini.

Kita anggap element input yang kita pakai di baris pertama adalah sebuah component, yang ketika kita lempar value tersebut ke input itu (baris 1), maka input nya akan balikin value yang dilempar tersebut melalui attribut @input . (baris 2)

Nah, yang terjadi di element input yang sudah diubah bentuknya oleh Vue (baris 2), akan mengeksekusi perintah:

1. Tangkap nilai dari value (value=”value”)
2. Balikkan hasil dari nilai value (baris 2) melalui attribute @input (@input=” x => value = x.target.value”)
3. Maka nilai value yang dilempar di nomor 1, sama dengan yang ditangkap di nomor 2.

Nggak heran kita bisa lihat di contoh ketika kita pakai directive v-model, apa yang kita input ke dalam text field, akan langsung di-binding oleh Vue. Hasilnya langsung bisa kita bind dengan syntax {{ value }}.

Konsep ini sangat penting dan mendasar di Vue. Saya nggak tahu seberapa banyak yang sudah paham dengan konsep ini, tapi untuk pemula ini bisa menjadi sesuatu yang penting untuk dipelajari.

Di kesempatan selanjutnya, saya mau coba berbagi satu studi kasus yang baru saya temui belakangan ini, meskipun studi kasusnya sering ditemukan ketika bikin program tapi saya masih sering . Ini masih berkaitan dengan directive v-model.

Kita akan coba bikin dialog component yang reusable. Visibility dari dialog itu bakal pake directive v-model. Kalau di topik ini kita pakai element HTML native, nah di dialog component itu kita akan cover topic gimana cara interaksi dengan child component di Vue.

Buat yang suka sama penjelasan saya, coba say hi dong di kolom komentar, kalau bisa sebutin dari kota mana, jadi kita bisa terkoneksi dan berbagi lebih banyak. 😆