Tutorial Vue Js - Cara Membuat Value Binding pada Radio Button

Assalamualaikum, wr. wb. teman-teman. Kali ini kita akan belajar bagaimana Cara Membuat Value Bindings pada Radio Buttons dengan Vue Js. Buat kalian yang langsung nyasar kesini, saya sarankan untuk melihat tutorial awal Vue Js yang pertama Disini. Dan tutorial kedua yang menjelaskan aplikasi yang digunakan sebagai kode editor dan untuk demo atau menjalankan kode pada tutorial kita Disini. Kita akan menggunakan Codepen untuk kode editornya.

Pada artikel sebelumnya kita sudah belajar Cara Membuat Value Binding Menggunakan Checkbox, hampir sama dengan cara sebelumnya yang akan kita terapkan pada tutorial Radio Buttons kali ini.

Baca: Cara Membuat Value Binding Menggunakan Checkbox

Beda dengan Checkbox yang mana pada Radio Button ini kita hanya boleh memilih satu diantara beberapa pilihan yang ada. Langsung saja perhatikan kode berikut. Pertama kita buat Instansiasi Vue-nya.

• Baris 1: Seperti biasa kita harus instansiasi object Vue, Oh ya jangan lupa import CDN Vue Js-nya agar kode Vue Js-nya bisa jalan.
• Baris 2: Kita definisikan nama elemen yang akan menggunakan data Vue kita.
• Baris 4 - 12: Kita buat beberapa object berbeda yaitu picked dengan nilai '', selected dengan value 'A' dan options dengan value array 'A', 'B', 'C'.

Kemudian ketikkan kode HTML-nya seperti berikut.

• Baris 3 - 7: Kita buat input dengan type radio dan v-model="picked" dimana ketika kita klik salah satu radio button-nya maka akan menghasilkan output berupa data berdasarkan value masing-masing inputan. Ini adalah cara biasa dengan mengambil value pada tiap field input.
• Baris 11 - 16: Sama seperti sebelumnya, tapi disini kita mendapatkan value-nya dari data Vue yang telah kita simpan pada object options. Maka dari itu kita harus menggunakan perulangan v-for untuk memanggil data array-nya serta v-bind agar ketika di klik tidak ke-trigger semua.

Untuk Demonya silahkan cek dibawah ini.

See the Pen Vue Js Radio button by indeveloper.id (@indeveloper) on CodePen.

Jadi ada 2 poin yang kita pelajari dari tutorial kali ini:

1. Cara membuat value binding Radio Button dengan cara biasa.
2. Cara membuat value binding Radio Button secara dinamis.

Sekian tutorial kali ini, semoga bermanfaat, sekian Wassalamualaikum, wr. wb.