How to delete current record in table in Vue.js

Vue.js is a progressive framework for building user interfaces. It is an open source project founded by Evan You. The core of Vue.js is the MVVM pattern, which implements automatic updating of views through data drive. In Vue.js applications, we often need to add, delete, modify, and query data, which involves operations on tables. How to delete the current record in the table in Vue.js?

First of all, we need to make it clear that Vue.js is a data-driven framework. If we want to delete a record in the table, we first need to maintain a data list through Vue.js, and then use v in the page The -for directive renders each record into a single line. When we delete a row of data, it is equivalent to removing the data from the data list, and then the view automatically updates. Therefore, we need to master the following two operations: 1. How to maintain the data list; 2. How to delete data from the data list.

1. Maintaining the data list

We can define an array in the data option of the Vue.js instance to maintain the data list. For example:

data() {
    return {
        dataList: [
            {id: 1, name: '小明', age: 20},
            {id: 2, name: '小红', age: 22},
            {id: 3, name: '小刚', age: 18},
            {id: 4, name: '小李', age: 25},
            {id: 5, name: '小张', age: 23},
        ]
    }
}

2. Delete data

In Vue.js, we can delete one or more elements from an array through the splice() method. The syntax of the splice() method is:

arr.splice(start[, deleteCount[, item1[, item2[, ...]]]])

where:

• start: The starting position to be deleted (counting from 0)
• deleteCount: The number of elements to be deleted, if it is 0, no elements will be deleted
• item1 , item2, ...: Elements to be added to the array. If no elements are specified, splice() only deletes elements and does not add elements.

For our needs, we only need to pass the current The index of the record and the splice() method are used to delete the corresponding data. For example:

deleteRecord(index) {
    this.dataList.splice(index, 1);
}

where index is the index of the current record.

When we click the delete button on the page, we can call the deleteRecord() method to delete the corresponding data. For example, we can write this in the template:

<template>
    <div>
        <table>
            <thead>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in dataList" :key="item.id">
                    <td>{{ item.id }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.age }}</td>
                    <td>
                        <button @click="deleteRecord(index)">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

Here, we render each record into a row through the v-for directive and add a delete button to each row. When the delete button is clicked, we delete the corresponding data record by calling the deleteRecord() method.

Summary

In Vue.js, deleting the current record in the table requires mastering two operations: 1. Maintaining the data list; 2. Deleting data from the data list. We can maintain the data list by defining an array in the Vue.js instance, and delete data from the data list through the splice() method. When we click the delete button on the page, we can delete the corresponding data record by calling this method.

The above is the detailed content of How to delete current record in table in Vue.js. For more information, please follow other related articles on the PHP Chinese website!