Tlačítko pro odstranění prvku pole ve Vue
Pojďme vytvořit tlačítko pro reaktivní odstranění prvků ze seznamu. Pusťme se do implementace. Předpokládejme, že máme pole:
data() {
return {
items: ['a', 'b', 'c', 'd', 'e'],
}
}
Vypíšeme obsah pole jako seznam:
<template>
<ul>
<li v-for="(item, index) in items" :key="index">
{{ item }}
</li>
</ul>
</template>
V každé položce seznamu vytvoříme tlačítko pro odstranění. Na toto tlačítko navážeme metodu, které budeme předávat jako parametr index prvku pole, který chceme odstranit:
<template>
<ul>
<li v-for="(item, index) in items" :key="index">
{{ item }}
<button @click="removeItem(index)">remove</button>
</li>
</ul>
</template>
Implementujeme odstranění v metodě removeItem:
methods: {
removeItem: function(index) {
this.items.splice(index, 1);
}
}
Je dáno pole. Vypište prvky tohoto pole
jako seznam ul. Zařiďte, aby
po kliknutí na libovolnou li byla odstraněna
ze seznamu.
