Cara Membuat Data Binding dengan Radio Button pada Vue Js

Jika pada TextBox dan TextArea. user dapat menulis sendiri keinginan mereka. lalu bagaimanakah jika kita membuat pilihan berdasarkan Radio Button?

Kali ini dengan bantuan form input bertipe Radio Button, kita akan membuat sebuah program dimana program tersebut memberikan user sebuah pilihan, dan akan menampilkan hasil dari pilihan tersebut, berikut implementasinya:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="app">
		<p>Apa yang Anda pilih?</p>
		<input type="radio" id="vuejs" v-model="pilih" value="Vue Js"><span>Vue Js</span>
		<br>
		<input type="radio" id="javascript" v-model="pilih" value="Javascript"><span>Javascript</span>
		<br>
		<p>Pilhan Anda adalah:</p>
		<p>{{ pilih }}</p>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		var app = new Vue({
			el: '#app',
			data: {
				pilih: ''
			}
		});
	</script>
</body>
</html>

Untuk mencoba hasil testnya, kalian cukup save, lalu buka pada browser. Jadi ketika kita memilih antara Vue Js atau JavaScript, teks dari pilihan yang teman-teman pilih akan muncul nilai value nya. Berarti kita berhasil membuat Data Binding Dengan Radio Button Menggunakan Vue Js