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:

javascriptdata() {
  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:

App.vue<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:

App.vue<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:

javascriptmethods: {
  removeItem: function(id) {
    this.users = this.users.filter((user) => {
      return user.id !== id;
    })
  }
}

App.vuedata() {
  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,
      },
    ],
  }
}