Jenis tipe form input yang lain adalah checkbox, yang merupakan form input yang memungkinkan user dapat memilih pilihan lebih dari satu. Yuk kita buat Data Binding dengan Checkbox pada Vue Js

Pada contoh program yang kita akan buat kali ini, kita membutuhkan sebuah tipe data baru, yaitu tipe data array yang di tandai dengan penggunaan tanda kurung siku [ dan ], tipe data ini digunakan untuk karna variable yang disimpan memiliki data lebih dari satu (untuk penjelasan tentang array akan dibahas juga pada tutorial selanjutnya).

Nah sekarang kita akan membuat Data Binding dengan Checkbox pada Vue Js. Kita langsung saja mempraktekkannya yaa

Seperti biasa kita buat terlebih dahulu struktur dasar HTML dan Checkboxnya, atau kalian bisa ikuti contoh dibawah ini:

 

Setelah jadi struktur dasar HTML dan beberapa Checkboxnya, kita jangan lupa untuk memanggil Vue Js nya yaa

Dan untuk hasil dari Data Binding dengan Checkbox pada Vue Js, teman-teman bisa cek pada browser yaa. Nah setelah kalian cek untuk hasilnya seperti kurang natural ya?

Untungnya Vue Js menyediakan sebuah cara khusus untuk lebih menaturalkan hasil yang semodel dengan itu, dengan menggunakan v-forĀ semuanya akan baik-baik saja, caranya dengan mengubah sedikit script pada index.html yang pertama kita buat, tepatnya pada bagian dibawah ini:

Awal:

 

Kita ubah menjadi:

 

Setelah diubah jangan lupa untuk disave, dan refresh browser kalian ya. Nah gimana nih teman-teman? Ketika kita menggunakan v-for maka lebih natural kan? Untuk penjelasan tentang v-for akan dibahas lebih lanjut pada tutorial array.