Membuat Chain Select Option Dengan VueJS
Di Artikel ini kita akan belajar Cara Merancang Chain Select Option Dengan VueJS, yang ingin kita bikin select option berantai. Berantai disini yaitu sekiranya kita pilih option parentnya karenanya bagian child akan menampilkan option yang berhubungan. Selaku contoh saya akan membangun select option yang berisi nama Provinsi serta Kota yang terdapat di Indonesia.
Pastinya selaku data Option Parent disini saya gunakan nama Provinsi dan data child saya tampilkan nama Kota. Baiklah seketika saja kita membuatnya berikut langkah-langkahnya :
Silahkan rekan-rekan membangun sebuah file HTML kemudian ketikkan code seperti dibawah ini
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=UTF-8>
<title></title>
<link rel=stylesheet href=https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css>
<script src=https://cdn.jsdelivr.net/npm/vue/dist/vue.js></script>
</head>
<body>
<div class=container mt-5>
<div class=row>
<div class=col-md-4 offset-4>
<div class=card>
<div class=card-header text-center bg-info text-white>
<h5>Merancang Chain Select Option Dengan VueJs</h5>
</div>
<div class=card-body>
<div id=app>
<h5>Provinsi</h5>
<select class=form-control name=chain_id v-model=selectedChainIds @change=onChangeChain>
<!-- <option> Pilih Provinsi </option> -->
<option v-for=link in chain :value=link.id v-text=link.name></option>
</select>
<div v-if=filteredChain.length>
<h5>Kota</h5>
<select class=form-control name=subChain_id v-model=selectedSubChainIds>
<!-- <option> Pilih Kota </option> -->
<option v-for=chain in filteredChain :value=chain.id v-text=chain.name></option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
perhatikan bagian tag <head> saya ada sisipkan library dari Bootstrap dan VueJs.
Berikutnya jagan lupa bagi menambahkan script yang berisi value dari data nama provinsi serta data nama kota yang akan ditampilkan, silahkan rekan-rekan ikuti script dibawah ini:
<script>
new Vue({
data: {
chain: [
{id: 1, name: 'DKI Jakarta'},
{id: 2, name: 'Jawa Barat'},
{id: 3 , name: 'Jawa Tengah'},
{id: 4 , name: 'Jawa Timur'},
{id: 5 , name: 'Banten'}
],
subChain: [
{id: 1, name: Jakarta Barat, chain_id: 1},
{id: 2, name: Jakarta Pusat, chain_id: 1},
{id: 3, name: Jakarta Selatan, chain_id: 1},
{id: 4, name: Jakarta Timur, chain_id: 1},
{id: 4, name: Jakarta Utara, chain_id: 1},
{id: 5, name: Bandung, chain_id: 2},
{id: 6, name: Karawang, chain_id: 2},
{id: 7, name: Semarang, chain_id: 3},
{id: 8, name: Solo, chain_id: 3},
],
selectedChainIds: -1,
selectedSubChainIds: -1
},
methods: {
onChangeChain() {
this.selectedSubChainIds = -1;
if(!this.selectedChainIds) {
this.selectedChainIds = -1;
}
}
},
computed: {
filteredChain() {
let filteredsubChains = [];
for(let i = 0 ; i < this.subChain.length ; i++) {
let subChain = this.subChain[i];
if(subChain.chain_id == this.selectedChainIds) {
filteredsubChains.push(subChain);
}
}
return filteredsubChains;
}
}
}).$mount('#app');
</script>
Baiklah sekiranya telah seketika saja simpan code-code diatas lalu jalankan di browser masing dan lihat hasilnya dengan memilih provinsi karenanya akan menampilkan kota sesuai id dari provinsinya.
Saya kira lumayan pada pembhasan artikel ini mengenai Cara Merancang Chain Select Option Dengan VueJS. Semoga bermanfaat serta menambahkan bahan belajar rekan-rekan seluruh, selamat mencoba.
Sumber https://kursuswebsite.org
