One-click delete function in vue

In many web applications, the delete function is a basic operation that allows users to conveniently delete specific data records that they no longer need. In Vue, we can use some built-in instructions and methods to implement one-click deletion function. In this article, we will introduce how to implement one-click deletion function in Vue.

1. Determine the data to be deleted

Before we begin, we need to clarify what data we want to delete. Normally, we can get the data to be deleted by sending a request to the backend. In this article, we are going to simulate this functionality, so we will use simulated data to do this.

Suppose we have a component called Delete List that contains a table containing the data we want to delete. To keep things simple, we will use the following simulated data as an example:

data() {
  return {
    items: [
      { id: 1, name: '物品1', description: '这是一件好物品' },
      { id: 2, name: '物品2', description: '这是另一件好物品' },
      { id: 3, name: '物品3', description: '这也是一件好物品' }
    ],
    selectedItems: []
  };
}

where items is an array containing all data records and selectedItems is an empty array , will contain the data we will delete.

2. Create check box

To implement the one-click delete function, we need to allow users to select multiple data records. To do this, we need to add a checkbox to each data record. We can use Vue's v-for directive to iterate through each data record and bind each checkbox to an array called selectedItems.

<table>
  <thead>
    <tr>
      <th>选择</th>
      <th>名称</th>
      <th>描述</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="item in items" :key="item.id">
      <td><input type="checkbox" :value="item" v-model="selectedItems"></td>
      <td>{{item.name}}</td>
      <td>{{item.description}}</td>
    </tr>
  </tbody>
</table>

Note that we use the v-model directive to bind the value of each check box. The value of each checkbox will be the item object containing that data record.

3. Delete selected items

Once the user selects the data record to delete, we need to use a button to perform the delete operation. We will define a method in the Vue component that will remove selected data records from the array using the built-in splice method.

methods: {
  deleteSelectedItems() {
    this.selectedItems.forEach(item => {
      const index = this.items.indexOf(item);
      this.items.splice(index, 1);
    });
    this.selectedItems = [];
  } 
}

Here, first we iterate over the selected data records, find the index of each data record in the items array, and delete it using the splice method. Then, we reset the selected data record with the selectedItems array.

4. Bind the delete button to the method

Now that we have the method to delete the selected item, we need to create a button that the user can click to delete Selected data record.

<button @click="deleteSelectedItems" :disabled="selectedItems.length === 0">删除所选项</button>

Here, the @click directive binds the deleteSelectedItems method, disabled binds a condition that only occurs when the selected data record is not The button can only be clicked when it is empty.

5. Complete code

Now we have completed the implementation of the one-click delete function in Vue. The following is the complete code:

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '物品1', description: '这是一件好物品' },
        { id: 2, name: '物品2', description: '这是另一件好物品' },
        { id: 3, name: '物品3', description: '这也是一件好物品' }
      ],
      selectedItems: []
    };
  },
  methods: {
    deleteSelectedItems() {
      this.selectedItems.forEach(item => {
        const index = this.items.indexOf(item);
        this.items.splice(index, 1);
      });
      this.selectedItems = [];
    } 
  }
};
</script>

6. Conclusion

It is very simple to implement one-click deletion function in Vue. We can use Vue's template syntax and custom methods to create checkboxes and remove them with a button once the data records are selected. This is one of the basic techniques for handling deletions in Vue, and can be used in conjunction with the backend API to achieve more complex functionality.

The above is the detailed content of One-click delete function in vue. For more information, please follow other related articles on the PHP Chinese website!