Nút xóa phần tử mảng trong Vue
Hãy tạo một nút để xóa phần tử khỏi danh sách một cách phản ứng. Chúng ta hãy bắt đầu thực hiện. Giả sử chúng ta có mảng sau:
data() {
return {
items: ['a', 'b', 'c', 'd', 'e'],
}
}
Hãy hiển thị nội dung của mảng dưới dạng danh sách:
<template>
<ul>
<li v-for="(item, index) in items" :key="index">
{{ item }}
</li>
</ul>
</template>
Hãy tạo một nút trong mỗi mục danh sách để xóa. Trong nút này, chúng ta sẽ liên kết một phương thức, tham số của nó sẽ truyền chỉ số của phần tử mảng mà chúng ta định xóa:
<template>
<ul>
<li v-for="(item, index) in items" :key="index">
{{ item }}
<button @click="removeItem(index)">remove</button>
</li>
</ul>
</template>
Hãy triển khai việc xóa trong phương thức removeItem:
methods: {
removeItem: function(index) {
this.items.splice(index, 1);
}
}
Cho một mảng. Hãy hiển thị các phần tử của mảng này
dưới dạng danh sách ul. Hãy làm sao để
khi nhấp vào bất kỳ li nào thì nó sẽ bị xóa
khỏi danh sách.
