Cara Menghapus Array pada Vue Js

Halo teman-teman pada kesempatan kali ini saya akan membahas Cara Menghapus Array pada Vue Js.

Nah bagi teman-teman yang masih bingung, gimana sih cara Menghapus array pada Vue Js. Kalian bisa menyimak contoh program yang akan kita buat sekarang.

Alur programnya adalah. Kita akan menampilkan List Arraynya, lalu kita buat juga sebuah tombol untuk menghapus array tersebut secara keseluruhan.

Agar tidak bingung mari langsung saja kita buat contoh programnya:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="app">
		<button @click="hapus">Menghapus array</button>
		<ul>
			<li v-for="mr in mobil">
				{{ mr }}
			</li>
		</ul>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		new Vue({
			el: '#app',
			data: {
				mobil: ['ferari', 'porsche', 'suzuki']
			},
			methods: {
				hapus: function() {
					this.mobil.splice(this.mobil)
					this.isi = ''
				}
			}
		})
	</script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<button @click="hapus">Menghapus array</button>

<ul>

</li>

</ul>

</div>

new Vue({

el: '#app',

data: {

mobil: ['ferari', 'porsche', 'suzuki']

methods: {

hapus: function() {

this.mobil.splice(this.mobil)

this.isi = ''

}

})

</script>

</body>

</html>

Contoh program yang kita buat di atas, kita menggunakan fungsi splice dengan parameter this.mobil, yang berarti kita menghapus array mobil.

Facebook DUMET School

Categories