Tentang Input Binding Pada Vue Js

Tidak kalah menarik karena dibagian ini kita akan melihat cara menghubungkan sebuah inputan dengan system two way data binding. Tentu kita masih membahas tentang Vue Js-nya jadi ada banyak sekali fitur fitur yang bisa kita terapkan untuk membuat web kita lebih interaktif. Contohnya langsung saja yang pertama kita akan buat tag <input> dengan type text sebagai struktur HTMLnya dimana semua inputannya kita akan tambahkan directive v-model sebagai berikut

V Modelnya tentu isinya adalah nama. Misalnya saya berikan nama fullname

Jadi dimana saja bila kita ingin menampilkannya hasil outputnya kita tinggal menggunakan binding expresions lalu cetak fullnamenya sebagai berikut

Dan bila kita lihat dibagian browsernya tentu kosong secara default tapi bila teman teman mulai mengetik text apapun dibagian inputannya maka secara otomatis tampil berdasarkan apa kita tulis

Jadi bila teman teman ingin membuat sistem live preview atau apapun yang konsepnya seperti hal diatas dengan menyambungkan inputan textnya maka v-model ini sangat tepat untuk digunakan. Nah tentu selain input type text kita pun bisa memberikan directive v-model dengan nama yang sama kedalam input checkboxnya lalu dengan value yang berbeda beda sebagai berikut

Diatas saya sudah buat beberapa input checkboxnya dan bila kita ingin menampilkan hasil outputnya sama seperti sebelumnya yakni mencetak nama variabel yang sesuai dengan nilai dari v-model yang kita tentukan. Karena nama v-modelnya bisa saja lebih dari satu maka kita harus definisikan dari awal di object datanya untuk memberi tahu bila lessons ini sebagai variabel array

Bila sudah seperti itu kita sudah bisa pilih atau check maka dia akan mengambil nilai valuenya untuk ditampilkan satu persatu dan nilai satu dengan nilai lainnya dipisahkan dengan koma bila teman teman check semuanya

Dan hal ini pun akan berlaku untuk bagian input radio atau pun input-input yang lainnya seperti select option atau pun textareanya. Tapi bedanya checkbox dengan radio adalah checkbox bisa memilih banyak pilihan sedangkan radio kita hanya bisa memilih satu pilihan. Jadi sekali lagi tiap mau menyambungkan sebuah input dengan data modelnya kita tinggal menggunakan directive v-model pada Vue Js. Terima kasih