VueJs - 将创建的项目推送到现有阵列并使其与其他现有项目一起显示

Posted 2021-03-26

我正在使用Vue执行POST请求以将新记录插入数据库。这是按预期工作的，下一个目标是将新创建的项目推送到现有数组并将其显示在表中。这是在Vue组件中完成的。

这是提交的表单：

<form @submit.prevent="createUser">

这是javascript部分：

export default {
    data(){
        return{
            users: {},

            form: new Form({
                name: '',
                email: '',
                password: '',
                type: '',
                bio: '',
                photo: '',
            })
        }
    },
    methods:{
        displayUsers(){
            axios.get('api/user').then( ({data}) => (this.users = data) )
        },

        createUser(){
            this.form.post('api/user').then( ({ data }) => 
                 this.users.push(data.data)
            );                
        }
    },
    created() {
        this.displayUsers();                        
    }
}

从createUser方法，该条目将发布到数据库，并将创建的条目推送到现有用户数组。我的后端代码返回此数据，即

return response()->json(['data' => $request->all()], 200);

认为这足以让新条目自动显示在桌面上而不刷新，因为用户阵列已更新，但这种情况不会发生。

显示所有项目的表格如下所示：

<tr v-for="user in users" :key="user.id">
     <td>{{ user.id }}</td>
     ....

那么我错过了什么？我的新创建的条目是否需要额外的步骤才能自动推送到我的桌子？

答案

试试这个 -

在createUser方法中，当您分配新创建的用户时，请避免变异。

createUser(){
    this.form.post('api/user').then( ({ data }) =>{
        this.users = [ ...this.users, data.data ];
    });
}

这有助于vue识别列表已更改，因为每次创建新用户时我们都会为用户分配一个全新的数组。

push方法修改相同的数组。扩展运算符有助于避免这种突变，因为我们正在复制新阵列中的所有用户以及新创建的用户。