Saatnya melakukan implementasi v-model pada bentuk tag HTML yang lain, yaitu model input select yang memungkinkan user atau pengguna dapat memilih pilihan yang berasal dari dropdown.
Tag Select membutuhkan tag lain yaitu tag Option untuk meletakkan pilihan-pilihannya. Langsung saja, berikut script selengkapnya:
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 name="" id="" v-model="pilih">
<option disabled value="">Pilih kota</option>
<option value="">Jakarta</option>
<option value="">Depok</option>
<option value="">Bogor</option>
</select>
<h3>Kota pilihan Anda adalah:</h3>
<p>{{ pilih }}</p>
</div>
</body>
</html>
Nah untuk script Vue Jsnya dibawah ini yaa teman-teman:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
pilih: ''
}
});
</script>
Untuk mengecek hasilnya teman-teman bisa save, lalu buka pada browser kalian yaa. Atau untuk hasilnya bisa dilihat juga pada gambar dibawah ini:
