Array multivalue merupakan array yang setiap element datanya memiliki beberapa nilai data, dan biasanya nilai data tersebut bertipe objek.
Jika array tunggal atau array biasa memiliki format penulisan:
|
1 |
nama array: [data1, data2, data3, dst...] |
Maka array multivalue memiliki format penulisan sebagai berikut:
|
1 2 3 4 |
nama_array: [ {data1: 'nilai_data1-1', data2: 'nilai_data1-2'} {data1: 'nilai_data2-1', data2: 'nilai_data2-2'} {data1: 'nilai_data3-1', data2: 'nilai_data3-2'} |
Dan diakses dengan menggunakan format penulisan:
|
1 |
nama_array.data1[indexnya] |
Jika dalam Vue, seperti sudah dipelajari sebelumnya, kita dapat menggunakan directive v-for untuk menampilkan seluruh data, daripada bingung-bingung, Yuk, langsung saja kepada contoh penerapannya:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <ul v-for="kd in kendaraan"> <li> <span>Jenis: {{ kd.jenis }}</span>, <span>Merk: {{ kd.merk }}</span>, <span>Warna: {{ kd.warna }}</span> </li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> new Vue({ el: '#app', data: { kendaraan: [ {jenis: 'mobil', merk: 'Suzuki', warna: 'Abu'}, {jenis: 'sepeda', merk: 'phoenix', warna: 'kuning'}, {jenis: 'bus', merk: 'Tayo', warna: 'Biru'} ] } }) </script> </body> </html> |
Demikian Cara Menggunakan Array Multivalue pada Vue Js. Semoga bermanfaat.