v-model pada Semua Elemen Formulir
Input, textarea, select, kotak centang, radio — cara v-model menyesuaikan diri dengan setiap jenis elemen.
v-model pada Semua Elemen Formulir adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.
Mengikat Input pada form
v-model membuat pengikatan dua arah antara kontrol form dan status reaktif Anda. Setiap jenis kontrol — teks, kotak centang, radio, pilihan, dan area teks — menggunakan v-model dengan cara yang sedikit berbeda. Pelajaran ini membahas semuanya.
Input Teks
Pada input teks, v-model mengikat nilai dan memperbaruinya saat input. Ketik di box tersebut dan referensinya akan diperbarui secara langsung.
<script setup>
import { ref } from 'vue'
const name = ref('')
</script>
<template>
<input v-model="name" />
<p>Hello, {{ name }}</p>
</template>Area Teks
Area teks bekerja seperti input teks. Gunakan v-model langsung pada elemennya — jangan menempatkan teks di antara tag.
<template>
<textarea v-model="message"></textarea>
</template>Kotak Centang: Nilai Logis
Satu kotak centang yang terikat pada referensi nilai logis akan beralih antara true dan false.
<script setup>
import { ref } from 'vue'
const agreed = ref(false)
</script>
<template>
<input type="checkbox" v-model="agreed" />
<p>Agreed: {{ agreed }}</p>
</template>Kotak Centang: Beberapa Pilihan ke dalam Larik
Ikat beberapa kotak centang ke referensi larik yang sama. Setiap kotak yang dicentang menambahkan value-nya ke dalam larik.
<script setup>
import { ref } from 'vue'
const hobbies = ref([])
</script>
<template>
<input type="checkbox" value="reading" v-model="hobbies" />
<input type="checkbox" value="coding" v-model="hobbies" />
<p>{{ hobbies }}</p>
</template>Tombol Radio
Tombol radio dalam satu grup berbagi satu referensi. Referensi tersebut menyimpan value dari pilihan yang dipilih.
<script setup>
import { ref } from 'vue'
const picked = ref('')
</script>
<template>
<input type="radio" value="small" v-model="picked" />
<input type="radio" value="large" v-model="picked" />
<p>Picked: {{ picked }}</p>
</template>Pilihan: Tunggal
Satu pilihan terikat pada nilai yang sesuai dengan opsi yang dipilih. Jika Anda mau, sediakan opsi placeholder dengan nilai kosong.
<script setup>
import { ref } from 'vue'
const city = ref('')
</script>
<template>
<select v-model="city">
<option value="">Choose</option>
<option value="paris">Paris</option>
<option value="tokyo">Tokyo</option>
</select>
</template>Pilihan: Banyak
Tambahkan atribut multiple dan ikat ke sebuah larik. Opsi yang dipilih akan dikumpulkan ke dalam larik.
<script setup>
import { ref } from 'vue'
const cities = ref([])
</script>
<template>
<select v-model="cities" multiple>
<option value="paris">Paris</option>
<option value="tokyo">Tokyo</option>
</select>
</template>Pengubah Nilai
Pengubah menyempurnakan v-model: .trim menghapus spasi kosong, .number mengonversi ke angka, dan .lazy menyinkronkan saat terjadi perubahan, bukan pada setiap penekanan tombol.
<input v-model.number="age" />
<input v-model.trim="username" />
<input v-model.lazy="note" />Satu Model Mental
Apa pun kontrolnya, v-model berarti nilai masuk dan perubahan keluar. Jenis kontrol hanya menentukan bentuk nilainya: nilai logis, string, atau larik.
Komponen Input Kustom
v-model juga berfungsi pada komponen buatan Anda sendiri. Input kustom mendeklarasikan prop modelValue dan memancarkan update:modelValue, sehingga komponen tersebut berperilaku seperti kontrol bawaan bagi komponen induknya.
<!-- parent -->
<MyTextInput v-model="name" />
<!-- child declares modelValue + emits update:modelValue -->Pemeriksaan Singkat
Uji pengetahuan Anda tentang pengikatan form.
Ringkasan
Pengikatan model pada berbagai kontrol form:
- Input teks dan area teks mengikat string.
- Satu kotak centang mengikat nilai logis; beberapa kotak centang mengikat larik.
- Tombol radio berbagi satu referensi yang menyimpan nilai terpilih.
- Kontrol pilihan mengikat sebuah nilai; dengan
multiple, kontrol tersebut mengikat larik. - Pengubah:
.trim,.number,.lazy.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “v-model pada Semua Elemen Formulir” gratis?
Ya — teks lengkap “v-model pada Semua Elemen Formulir” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “v-model pada Semua Elemen Formulir”?
Input, textarea, select, kotak centang, radio — cara v-model menyesuaikan diri dengan setiap jenis elemen. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Vue Academy?
Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.
Berapa lama pelajaran “v-model pada Semua Elemen Formulir” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?
Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- v-model pada Semua Elemen Formulir
- Pengiriman dan Pengaturan Ulang Formulir
- Pola Validasi Manual
- VeeValidate untuk Validasi Berbasis Skema