• Apa Itu v-model?
• v-model pada Input Text
• v-model pada Textarea
• v-model pada Checkbox
• v-model pada Radio Button
• v-model pada Select
• Modifiers pada v-model
• Kesimpulan

Halo teman-teman semuanya, pada artikel sebelumnya kita sudah belajar tentang List Rendering, bagaimana cara menampilkan data dalam bentuk daftar menggunakan v-for.

Pada artikel kali ini, kita akan membahas tentang Form Binding, yaitu bagaimana menghubungkan input form dengan state di Vue menggunakan v-model.

Apa Itu v-model?

v-model adalah directive di Vue yang digunakan untuk two-way data binding. Artinya, data di state dan nilai input di form selalu sinkron:

• Saat kita mengetik di input, state otomatis berubah.
• Saat state berubah, nilai input juga ikut berubah.

v-model pada Input Text

<script setup>
import { ref } from "vue"

const name = ref("")
</script>

<template>
  <div>
    <input v-model="name" placeholder="Ketik nama..." />
    <p>Halo, {{ name }}</p>
  </div>
</template>

Ketika kita mengetik di input, nilai name langsung berubah dan ditampilkan di <p>.

v-model pada Textarea

<script setup>
import { ref } from "vue"

const message = ref("")
</script>

<template>
  <div>
    <textarea v-model="message" placeholder="Tulis pesan..."></textarea>
    <p>Pesan: {{ message }}</p>
  </div>
</template>

v-model pada Checkbox

Checkbox bisa digunakan untuk boolean, atau untuk multiple value jika dalam array.

<script setup>
import { ref } from "vue"

const agree = ref(false)
</script>

<template>
  <label>
    <input type="checkbox" v-model="agree" />
    Saya setuju
  </label>
  <p>Status: {{ agree }}</p>
</template>

Nilai agree akan true jika dicentang, false jika tidak.

v-model pada Radio Button

<script setup>
import { ref } from "vue"

const gender = ref("")
</script>

<template>
  <div>
    <label>
      <input type="radio" value="Laki-laki" v-model="gender" /> Laki-laki
    </label>
    <label>
      <input type="radio" value="Perempuan" v-model="gender" /> Perempuan
    </label>
    <p>Jenis Kelamin: {{ gender }}</p>
  </div>
</template>

Hanya satu nilai yang bisa dipilih, sesuai radio yang aktif.

v-model pada Select

<script setup>
import { ref } from "vue"

const city = ref("")
</script>

<template>
  <select v-model="city">
    <option disabled value="">-- Pilih Kota --</option>
    <option>Jakarta</option>
    <option>Bandung</option>
    <option>Surabaya</option>
  </select>

  <p>Kota dipilih: {{ city }}</p>
</template>

Ketika kita memilih kota, state city langsung ikut berubah.

Modifiers pada v-model

Vue menyediakan modifier untuk v-model:

• .lazy → update hanya saat blur (bukan setiap ketikan).
• .trim → menghapus spasi di awal/akhir input.
• .number → otomatis ubah input menjadi angka.

<input v-model.lazy="name" />
<input v-model.trim="name" />
<input v-model.number="age" />

Kesimpulan

Pada artikel ini, kita sudah belajar tentang Form Binding di Vue menggunakan v-model, mulai dari input teks, textarea, checkbox, radio button, select, hingga penggunaan modifiers. Dengan v-model, proses sinkronisasi data antara form dan state menjadi jauh lebih mudah.

Di artikel berikutnya, kita akan membahas tentang Lifecycle Hooks, yaitu bagaimana menjalankan kode pada fase tertentu dalam siklus hidup sebuah komponen.

Terima kasih