Nút xóa từ mảng đối tượng trong Vue
Bây giờ hãy cùng triển khai một nút để xóa dữ liệu khỏi mảng đối tượng. Hãy bắt đầu thực hiện. Giả sử chúng ta có mảng sau:
data() {
return {
users: [
{
id: 1,
name: 'name1',
surn: 'surn1',
},
{
id: 2,
name: 'name2',
surn: 'surn2',
},
{
id: 3,
name: 'name3',
surn: 'surn3',
},
]
}
}
Hãy hiển thị nội dung của mảng dưới dạng danh sách:
<template>
<ul>
<li v-for="user in users" :key="user.id">
{{ user.name }}
{{ user.surn }}
</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ẽ ràng buộc
một phương thức, tham số của nó sẽ là
id của phần tử mảng
mà chúng ta định xóa:
<template>
<ul>
<li v-for="user in users" :key="user.id">
{{ user.name }}
{{ user.surn }}
<button @click="removeItem(user.id)">remove</button>
</li>
</ul>
</template>
Hãy triển khai việc xóa trong phương thức removeItem:
methods: {
removeItem: function(id) {
this.users = this.users.filter((user) => {
return user.id !== id;
})
}
}
Cho mảng dữ liệu nhân viên sau:
data() {
return {
users: [
{
id: 1,
name: 'name1',
salary: 100,
age: 30,
},
{
id: 2,
name: 'name2',
salary: 200,
age: 40,
},
{
id: 3,
name: 'name3',
salary: 300,
age: 50,
},
],
}
}
Hãy hiển thị dữ liệu nhân viên dưới dạng bảng HTML. Tạo một cột chứa các liên kết để xóa nhân viên.
