时间戳

首页 > 解决方案 > 无法从表中删除用户

vue.js - 无法从表中删除用户

问题描述

我有一个嵌套表，我在其中按用户所属的部门对用户进行分组。我遇到的问题是，如果我单击删除按钮，我删除的特定用户不会从列表中删除，并且我的控制台中没有任何错误。

这是我的代码

<template>
    <div>
        <div class="row">
            <div class="col-lg-12">
                <table class="table table-bordered table-sm">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Job Title</th>
                        </tr>
                    </thead>

                    <tbody v-for="(users, department) in personnal">
                        <tr>
                            <td>{{ department }}</td>
                        </tr>

                        <tr v-for="user in users">
                            <td>{{ user.name }}</td>
                            <td>{{ user.job_title }}</td>
                            <td>
                                <div class="btn btn-danger btn-sm" @click="removeUser(user)">
                                    <i class="fa fa-trash"></i>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>

export default
{
    props: [],
    data() {
        return {
            personnal: {},
        }
    },
    computed: {

    },
    methods: {
        getUsers(){
            axios.get(`/api/users`).then(response => {
                this.personnal = response.data.users;
            });
        },
        removeUser(user){
            axios.delete(`/api/users/${user.id}/delete`).then(response => {
                Object.keys(this.personnal).forEach(user => {
                    this.personnal[user].filter(u => u.id !== response.data.id);
                    this.personnal[user].slice(response.data);
                });
            });
        }
    },
    mounted() {
        this.getUsers();
    }
}
</script>

标签： vue.js

解决方案

首先，您必须在 click 事件中同时传递department和：user

<div class="btn btn-danger btn-sm" @click="removeUser(department, user)">
    <i class="fa fa-trash"></i>
</div>

然后，在removeUser方法中：

removeUser(department, user){
    axios.delete(`/api/users/${user.id}/delete`).then(response => {
        const index = this.personnal[department].findIndex(u => u.id === user.id);
        this.personnal[department].splice(index, 1);
    });
}

推荐阅读