Laravel、惯性和 vuejs

Posted 2023-03-16

【中文标题】Laravel、惯性和 vuejs

【英文标题】：Laravel, inertiajs and 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"  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”吗？

【参考方案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))

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