Cara Menggunakan Array Multivalue pada Vue Js

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:

nama array: [data1, data2, data3, dst...]

Maka array multivalue memiliki format penulisan sebagai berikut:

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:

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:

<!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.

Cara Menggunakan Array Multivalue pada Vue Js

Kategori