Halo teman-teman semuanya, di artikel sebelumnya kita udah belajar bagaimana cara menangani event dengan x-on atau @event. Sekarang kita akan membahas salah satu fitur paling penting di Alpine.js, yaitu reactive state menggunakan directive x-model.
Dengan x-model, kita bisa membuat binding dua arah antara elemen input HTML dan data di x-data. Artinya, saat user mengisi form, data di JavaScript langsung berubah, dan sebaliknya, jika datanya berubah, tampilan juga langsung menyesuaikan.
Apa Itu x-model?
x-model adalah directive yang digunakan untuk menghubungkan value dari elemen input ke sebuah properti di x-data. Ini yang disebut two-way data binding, karena perubahan di salah satu sisi (input atau data) akan langsung memengaruhi sisi lainnya.
Contoh sederhana:
<div x-data="{ nama: '' }">
<input type="text" x-model="nama" placeholder="Masukkan nama">
<p>Halo, <span x-text="nama"></span>!</p>
</div>
Ketika kita mengetik di input, teks di bawahnya akan langsung mengikuti nilai yang kita masukkan.
Mendukung Berbagai Jenis Input
-
Input Teks
<input type="text" x-model="teks">
-
Textarea
<textarea x-model="komentar"></textarea>
-
Checkbox
<input type="checkbox" x-model="setuju">
<p x-text="setuju ? 'Disetujui' : 'Belum disetujui'"></p>
-
Radio Button
<input type="radio" x-model="gender" value="Laki-laki"> Laki-laki
<input type="radio" x-model="gender" value="Perempuan"> Perempuan
<p x-text="gender"></p>
-
Select Dropdown
<select x-model="pilihan">
<option value="">-- Pilih --</option>
<option value="satu">Satu</option>
<option value="dua">Dua</option>
</select>
<p x-text="pilihan"></p>
Binding ke Array (Checkbox Multiple)
Kalau kita punya beberapa checkbox dan ingin menyimpan hasilnya dalam array, x-model juga bisa:
<div x-data="{ hobi: [] }">
<label><input type="checkbox" value="Membaca" x-model="hobi"> Membaca</label>
<label><input type="checkbox" value="Menulis" x-model="hobi"> Menulis</label>
<label><input type="checkbox" value="Bersepeda" x-model="hobi"> Bersepeda</label>
<p x-text="hobi.join(', ')"></p>
</div>
Saat user mencentang hobi, data hobi akan terisi array dari nilai-nilai yang dipilih.
Manfaat Reactive State
Dengan reactive state dari x-model, kita bisa:
- Menyimpan data form secara langsung tanpa nulis banyak JavaScript
- Menampilkan preview input secara real-time
- Mempermudah validasi atau manipulasi data saat input
Semuanya dilakukan langsung di HTML, tanpa harus bikin banyak kode JavaScript.
Kesimpulan
Di artikel ini kita udah belajar cara menggunakan x-model untuk membuat binding dua arah antara input dan data. Kita juga udah lihat contoh penggunaannya di berbagai tipe input, mulai dari teks, checkbox, radio button, hingga select dropdown.
Di artikel berikutnya, kita akan membahas Conditional Rendering, supaya kita bisa menampilkan atau menyembunyikan elemen berdasarkan kondisi tertentu.
Terima Kasih