Table of Content
Introduction
Array dapat menampung beberapa nilai dan tipe data dalam satu buah variabel data.
app.js
let app = new Vue({
el: '#app',
data: {
kendaraan: ['mobil','motor','sepeda']
}
})index.html
<div id="app">
<ul>
<li v-for="kd in kendaraan">{{ kd }}</li>
</ul>
</div>Menambah Data Array
app.js
let app = new Vue({
el: '#app',
data: {
isi: '',
kendaraan: ['mobil','motor','sepeda']
},
methods: {
tambah: function(){
this.kendaraan.push(this.isi)
this.isi = ''
}
}
})index.html
<div id="app">
<input type="text" v-model="isi">
<button @click="tambah">Tambah</button>
<ul>
<li v-for="kd in kendaraan">{{ kd }}</li>
</ul>
</div>Menghapus Array
app.js
let app = new Vue({
el: '#app',
data: {
kendaraan: ['mobil','motor','sepeda']
},
methods: {
hapus(index){
this.kendaraan.splice(index,1)
}
}
})index.html
<li v-for="(kd, index) in kendaraan"><button @click="hapus(index)">x</button>{{ kd }}</li>Pencarian Array
app.js
let app = new Vue({
el: '#app',
data: {
cari: '',
kendaraan: [
{ jenis: 'mobil', merk: 'honda'},
{ jenis: 'motor', merk: 'yamaha'},
{ jenis: 'sepeda', merk: 'fiat'}
]
},
computed: {
filterKendaraan: function(){
return this.kendaraan.filter((kd) => {
return kd.merk.match(this.cari)
})
}
}
})index.html
<div id="app">
<input type="text" placeholder="cari data" v-model="cari">
<ul>
<li v-for="(kd, index) in filterKendaraan"><button @click="hapus(index)">x</button>{{ kd.jenis }}({{ kd.merk }})</li>
</ul>
</div>Penjelasan :
- untuk mencari data array, kita dapat menggunakan function filter() dan match()