Vue में ऐरे आइटम को हटाने के लिए बटन

आइए एक सूची से आइटम को प्रतिक्रियाशील रूप से हटाने के लिए एक बटन बनाएं। आइए कार्यान्वयन शुरू करें। मान लीजिए कि हमारे पास एक ऐरे दी गई है:

data() {
	return {
		items: ['a', 'b', 'c', 'd', 'e'],
	}
}

आइए ऐरे की सामग्री को एक सूची के रूप में प्रदर्शित करें:

<template>
	<ul>
		<li v-for="(item, index) in items" :key="index">
			{{ item }}
		</li>
	</ul>
</template>

आइए सूची के प्रत्येक आइटम में एक बटन बनाएं जो हटाने के काम आएगा। इस बटन में, हम एक मेथड बाइंड करेंगे, जिसके पैरामीटर के रूप में हम ऐरे आइटम का इंडेक्स पास करेंगे, जिसे हम हटाना चाहते हैं:

<template>
	<ul>
		<li v-for="(item, index) in items" :key="index">
			{{ item }}
			<button @click="removeItem(index)">हटाएं</button>
		</li>
	</ul>
</template>

आइए removeItem मेथड में हटाने का तरीका लागू करें:

methods: {
	removeItem: function(index) {
		this.items.splice(index, 1);
	}
}

एक ऐरे दी गई है। इस ऐरे के एलिमेंट्स को ul सूची के रूप में प्रदर्शित करें। ऐसा करें कि किसी भी li पर क्लिक करने पर वह सूची से हट जाए।