Kali ini kita akan melanjutkan seri belajar Laravel Livewire, yaitu bagaimana cara menggunakan data binding. Biasanya konsep ini sering sekali digunakan ketika kita belajar AlpineJS. Laravel Livewire justru bertumpu pada teknologi AlpineJS ini. Jadi kalo mau belajar Livewire sedikit sedikit belajar juga ya tentang gimana cara AlpineJS ini bekerja
Saya harap kalian sudah mengikuti tutorial sebelumnya Cara Instal Laravel Livewire
Langkah Langkah
Pertama, buat komponen livewire dengan perintah berikut
php artisan make:livewire contact-data
contact-data bisa diganti dengan nama sesuai keingingan kalian. Kalian juga bisa menuliskannya dengan format seperti ContactData
Kedua, buka file welcome.blade.php dan isikan dengan kode berikut
@livewire akan langsung membaca file di dalam folder view/liveware
Lalu buka file ContactData.php. Kita bisa menambahkan menambahkan property berupa variabel yang bisa dibaca oleh blade
Setelah itu kita isikan, file contact-data.blade.php dengan kode berikut, dimana kita akan menambahkan tag input dan label yang mengacu pada variabel $name
Perhatikan di sana kita menambahkan property wire:model pada tag input, dimana ini sebenarnya merupakan fitur yang lumrah dijumpai pada Livewire. Sedangkan isinya bernama name harus sesuai dengan nama variabel yang sudah kita tuliskan di ContactData
Maka hasilnya akan menjadi berikut
Ketika kita coba ubah pun di dalam form input tersebut, tulisan akan berubah secara realtime
Selain variabel dengan tipe data string seperti diatas, kita juga bisa memnbuat variabel bertipe data boolean seperti berikut
Lalu kita harus membuat input checkbox yang berisikan wire:model dan mengambil variabel bernama $command
Sekarang kita bisa mencheck dan men-uncheck input tersebut untuk memberikan tanda seru atau tidak pada tulisan hello indra
