v-model pada Komponen (defineModel)

v-model di komponen buatan sendiri

Di bab 8 kita memakai v-model pada <input> bawaan. Kamu juga bisa membuat komponen sendiri — seperti stepper jumlah, rating bintang, atau input bergaya khusus — yang dipakai dengan v-model:

<Stepper v-model="jumlah" />

Di balik layar, v-model pada komponen adalah gabungan sebuah prop (modelValue) dan sebuah event (update:modelValue). Kabar baik: sejak Vue 3.4 ada makro defineModel() yang mengurus keduanya sekaligus.

Cara modern: defineModel()

<!-- Stepper.vue -->
<script setup>
const model = defineModel()      // ref yang tersambung ke v-model induk
</script>

<template>
  <button @click="model--">-</button>
  <span>{{ model }}</span>
  <button @click="model++">+</button>
</template>

model berperilaku seperti ref biasa: membaca memberi nilai dari induk, menulis otomatis mengirim update:modelValue ke induk. Di script akses dengan model.value; di template cukup model.

Nilai awal & tipe

const model = defineModel({ type: Number, default: 0 })

v-model dengan argumen (banyak model)

Satu komponen boleh punya beberapa v-model dengan memberi nama:

<FormNama v-model:depan="depan" v-model:belakang="belakang" />

<!-- FormNama.vue -->
const depan = defineModel('depan')
const belakang = defineModel('belakang')

Modifier kustom

<InputTeks v-model.kapital="nama" />

const [model, mod] = defineModel({
  set(nilai) {
    return mod.kapital ? nilai.toUpperCase() : nilai
  },
})

Cara manual (setara)

// Anak
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])

<input :value="modelValue" @input="emit('update:modelValue', $event.target.value)">

Memahami cara manual berguna saat membaca kode lama atau pustaka lain, tetapi defineModel jauh lebih ringkas.

Menghubungkan input bawaan

Untuk komponen pembungkus input, cukup teruskan model ke elemen bawaan:

<!-- InputTeks.vue -->
<script setup>
const model = defineModel()
</script>
<template>
  <input v-model="model" class="input">
</template>

Kesalahan umum

• Mengubah prop modelValue langsung di komponen manual — selalu lewat emit('update:modelValue', ...).
• Lupa bahwa defineModel butuh Vue 3.4 ke atas.
• Mencampur defineModel() dengan defineProps(['modelValue']) untuk prop yang sama.