Laravel、惯性和 vuejs答案

【问题标题】：Laravel, inertiajs and vuejsLaravel、惯性和 vuejs
【发布时间】：2021-06-02 21:39:10
【问题描述】：

我正在做一个使用 laravel、inertiajs 和 vuejs 的项目。我总是得到 404 |当我尝试从数据库中删除用户时未找到错误。当我单击带有 deleteUser 方法的按钮时，我想删除用户。可能有什么问题？

路线

Route::delete('/destroy/{user}', [AppController::class, 'destroy'])->name('users.destroy');

控制器

public function destroy(User $user)
    {
        $user->delete();
    }

vue

<template>
    <app-layout>
        <div v-for="user in users" :key="user.id">
            <div class="flex bg-white border px-6 py-6 rounded-sm max-w-2xl mx-auto mt-6">
                <img :src="user.profile_photo_url" alt="Image" class="h-14 w-14 rounded-full"/>
                <div class="flex-1">
                    <span class="ml-2 text-lg text-black font-semibold">
                        {{user.name}}
                    </span>
                    <span class="float-right ml-2">
                        <button @click="deleteUser" class="border border-purple-300 px-4 py-1 rounded-full text-purple-600 hover:bg-purple-600 hover:text-white hover:border-transparent">Follow</button>
                    </span>
                    <br/>
                    <span class="ml-2 text-gray-500 font-medium">
                        Laravel and Vuejs
                    </span>
                </div>
            </div>
        </div>
    </app-layout>
</template>

<script>
    import AppLayout from '@/Layouts/AppLayout'

    export default {
        components: {
            AppLayout,
        },

        props: ['users'],

        data(){
            return{
                form:{
                    user_id:''
                }
            }
        },

        methods:{
            deleteUser() {
            if (confirm('Are you sure you want to delete this contact?')) {
                this.$inertia.delete(`/destroy/${this.users.id}`)
                .then(() => {
                })
            }
            }
        }
    }
</script>

【问题讨论】：

您的完整网址是什么？由 laravel 生成
在浏览器中使用public url 或`pretty url ?
localhost:8000/users 是我的网址
你的请求方法是“DELETE”吗？

标签： laravel vue.js inertiajs

【解决方案1】：

删除操作应接受迭代中的当前用户作为参数。

<button @click="delete(user)" class="border border-purple-300 px-4 py-1 rounded-full text-purple-600 hover:bg-purple-600 hover:text-white hover:border-transparent">Follow</button>

那么您应该将用户 ID 作为参数传递给您的删除路由：

methods: {
    delete(user) {
        if (confirm('Are you sure you want to delete this contact?')) {
            this.$inertia.delete(`/destroy/${user.id}`);
        }
    }
}

【讨论】：

【解决方案2】：

您可以像这样将数据传递给您的方法：

<button @click="deleteUser(user)">Delete</button>

methods: {
deleteUser: function(user){
this.$inertia.delete(this.route('users.destroy'), user))
}}

这是因为您在用户控制器中的删除方法要求用户变量。

【讨论】：