Binding Dua Arah dengan `v-model` di Vue 3

Binding dua arah adalah fondasi aplikasi Vue yang dinamis, memungkinkan data diperbarui secara otomatis sebagai respons terhadap input pengguna. Di Vue 3, v-model menyediakan cara yang efisien untuk melakukan two-way binding antara input formulir dan state komponen. Panduan ini akan membahas cara kerja v-model, contoh penggunaan praktis, dan praktik terbaiknya.

1. Apa itu Binding Dua Arah?

Binding dua arah menyinkronkan data antara model (state JavaScript) dan tampilan (HTML). Saat pengguna mengubah nilai input, state otomatis diperbarui, dan sebaliknya, setiap perubahan state langsung tercermin di UI. Fitur ini menjaga antarmuka tetap responsif dan interaktif tanpa harus menulis banyak kode boilerplate.

2. Memahami Sintaks v-model di Vue 3

a. Penggunaan Dasar

v-model menyederhanakan data binding pada input formulir.

<template>
  <input v-model="message" placeholder="Type something" />
  <p>Message: {{ message }}</p>
</template>

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

const message = ref('');
</script>

• Input teks dan variabel message selalu tersinkronisasi secara real-time.

b. Mengikat Berbagai Jenis Input

v-model dapat digunakan untuk teks, checkbox, radio, dan select.

<template>
  <input type="text" v-model="textInput" placeholder="Text input" />
  <input type="checkbox" v-model="isChecked" /> Checked: {{ isChecked }}
  <select v-model="selected">
    <option disabled value="">Please select one</option>
    <option>Option 1</option>
    <option>Option 2</option>
  </select>
</template>

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

const textInput = ref('');
const isChecked = ref(false);
const selected = ref('');
</script>

• Semua input ini akan secara otomatis mengubah nilai state terkait.

c. Menggunakan v-model pada Komponen Kustom

Untuk komponen kustom, v-model menggunakan prop modelValue dan event update:modelValue.

<!-- CustomInput.vue -->
<template>
  <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
</template>

<script setup>
defineProps(['modelValue']);
defineEmits(['update:modelValue']);
</script>

<!-- ParentComponent.vue -->
<template>
  <CustomInput v-model="customInputValue" />
</template>

<script setup>
import { ref } from 'vue';
import CustomInput from './CustomInput.vue';

const customInputValue = ref('');
</script>

• Saat pengguna mengetik, state di induk akan otomatis diperbarui.

3. Contoh Praktis Binding Dua Arah

• Formulir Input: Memperbarui state saat pengguna mengetik dan menampilkan hasil langsung.
• Input Pencarian: Filter data secara real-time saat pengguna mengetik.
• Filter atau Toggle UI: Sinkronisasi tombol atau checkbox dengan state global.

4. Kesalahan Umum

• Lupa menyiapkan modelValue atau update:modelValue pada komponen kustom.
• Salah memahami sifat reaktif v-model, misalnya menimpa ref dengan cara yang memutus reaktivitas.
• Menggunakan v-model berlebihan yang menyebabkan perubahan state berulang.

5. Praktik Terbaik

• Buat komponen tetap stateless bila memungkinkan.
• Gunakan v-model dengan bijak untuk mencegah reaktivitas berlebihan.
• Pahami kapan menggunakan v-model dibandingkan props dan event emitters untuk komunikasi antar komponen.

6. Kesimpulan

v-model adalah alat penting di Vue 3 untuk membangun antarmuka yang interaktif dan responsif. Menguasai two-way binding akan memudahkan pengelolaan state dan meningkatkan pengalaman pengguna. Praktikkan v-model dalam berbagai skenario untuk memperkuat pemahaman Anda dan membangun aplikasi Vue yang dinamis.