Melakukan Implementasi v-model Vue Js pada tag Select Option level 2

Jika pada sebelumnya kita sudah melakukan Implementasi v-model pada tag Select Option HTML pada dengan Vue Js secara sederhana. Pada kali ini kita akan memberikan nilai pada masing-masing Option pada Select tsb.

Untuk itu teman-teman bisa mengikuti script dibawah ini ya, seperti biasa diawal kita buat terlebih dahulu struktur dasar HTML dan beberapa Option pada Selectnya:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="app">
		<h3>Pilih kota:</h3>
		<select v-model="pilih">
			<option disabled value="">Pilih kota</option>
			<option value="Ibu Kota Negara">Jakarta</option>
			<option value="Kota Kembang">Bandung</option>
			<option value="Kota Hujan">Bogor</option>
		</select>
		<h3>Kota pilihan Anda adalah:</h3>
		<p>{{ pilih }}</p>
	</div>
</html>

Nah jika kalian belum menyimak atau melihat tutorial yang sebelumnya lebih baik teman-teman bisa cek terlebih dahulu, untuk linknya ada disini yaa. Implementasi v-model pada tag HTML Select Option disini kita akan menambahkan value atau kita memberikan nilai pada tiap-tiap Optionnya

Jadi semisal pada contoh kita memilih Jakarta, maka nilai yang akan ditampilkan itu adalah Ibu Kota Negara, yang diambil dari attribute Value pada tag Optionnya.

Untuk script pada Vue Js nya sama saja seperti tutorial yang melakukan Implementasi v-model pada tag Select Option HTML pada dengan Vue Js.

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
	var app = new Vue({
		el: '#app',
		data: {
			pilih: ''
		}
	});
</script>