Dugme za brisanje elementa niza u Vue
Hajde da napravimo dugme za reaktivno brisanje elemenata iz liste. Pređimo na realizaciju. Neka nam je dat niz:
data() {
return {
items: ['a', 'b', 'c', 'd', 'e'],
}
}
Prikažimo sadržaj niza u vidu liste:
<template>
<ul>
<li v-for="(item, index) in items" :key="index">
{{ item }}
</li>
</ul>
</template>
Napravimo u svakoj stavci liste dugme za brisanje. U ovom dugmetu ćemo vezati metodu, čiji parametar će biti broj elementa niza, koji nameravamo da obrišemo:
<template>
<ul>
<li v-for="(item, index) in items" :key="index">
{{ item }}
<button @click="removeItem(index)">remove</button>
</li>
</ul>
</template>
Realizujmo brisanje u metodu removeItem:
methods: {
removeItem: function(index) {
this.items.splice(index, 1);
}
}
Dat je niz. Prikažite elemente ovog niza
u vidu liste ul. Uredite tako da
klikom na bilo koju li ona se briše
iz liste.
