ปุ่มสำหรับลบองค์ประกอบอาร์เรย์ใน 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)">remove</button>
</li>
</ul>
</template>
ดำเนินการลบในเมธอด removeItem:
methods: {
removeItem: function(index) {
this.items.splice(index, 1);
}
}
กำหนดอาร์เรย์ แสดงองค์ประกอบของอาร์เรย์นี้
ในรูปแบบรายการ ul ทำให้
เมื่อคลิกที่ li ใดๆ มันจะถูกลบ
ออกจากรายการ
