如何在Laravel项目中使用VueJS模态框组件调用路由实现删除功能

第一步：配置Laravel相关基础项 #

• 首先在routes/api.php中定义删除路由，和你已写好的destroy方法绑定：

// 资源路由会自动生成对应destroy方法的路由，替换为你自己的控制器名
Route::resource('你的资源路由标识', 对应控制器::class);
// 也可以单独定义删除路由
Route::delete('/自定义路由前缀/{id}', [对应控制器::class, 'destroy'])->name('自定义路由名');

• 处理CSRF校验，在blade模板的head标签中加入csrf元标记：

<meta name="csrf-token" content="{{ csrf_token() }}">

• 在app.js中配置全局请求参数，前提是项目已安装axios（Laravel默认自带）：

import axios from 'axios'
window.axios = axios
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[name="csrf-token"]').content;
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

• 完善你写好的destroy方法，删除完成后返回json响应：

public function destroy($id)
{
    // 你的删除业务逻辑
    模型::destroy($id);
    return response()->json(['code' => 200, 'msg' => '删除成功']);
}

第二步：修改Vue模态框组件 #

调整组件支持传入要删除的资源ID，新增删除请求方法：

<template>
<button type="button" v-on:click="toggleModal()">删除</button>
<div v-if="showModal"
     class="overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center flex">
    <div class="relative w-80 my-6">
        <div
            class="border-0 rounded-lg shadow-lg relative flex flex-col bg-white outline-none focus:outline-none">
            <div
                class="flex pl-5 pt-5">
                <h3 class="text-lg font-medium">
                    确认删除
                </h3>
            </div>
            <div class="relative pl-6 pt-4 flex-auto">
                <p class="text-lg leading-relaxed">
                    您确定要删除该条数据吗？
                </p>
            </div>
            <div class="flex items-center justify-end p-6">
                <button
                    class="text-red-500 bg-transparent border border-solid border-red-500 hover:bg-red-500 hover:text-white active:bg-red-600 font-bold uppercase text-sm px-6 py-3 rounded outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
                    type="button" v-on:click="toggleModal()">
                    取消
                </button>
                <button
                    class="bg-red-500 text-white font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150 rounded"
                    type="button" v-on:click="deleteItem" :disabled="deleting">
                    {{ deleting ? '删除中...' : '确认删除' }}
                </button>
            </div>
        </div>
    </div>
</div>
<div v-if="showModal" class="opacity-25 fixed inset-0 z-40 bg-black"></div>
</template>
<script>
export default {
name: "modal-component",
// 接收父级传入的要删除的资源ID
props: {
    deleteId: {
        type: Number,
        required: true
    }
},
data() {
    return {
        showModal: false,
        deleting: false // 防止重复提交的状态标识
    }
},
methods: {
    toggleModal: function () {
        this.showModal = !this.showModal;
        if (!this.showModal) {
            this.deleting = false
        }
    },
    async deleteItem() {
        this.deleting = true
        try {
            // 替换成你自己定义的删除路由路径
            await axios.delete(`/你的删除路由前缀/${this.deleteId}`)
            this.toggleModal()
            // 给父组件发送删除成功通知
            this.$emit('delete-success')
            alert('删除成功')
        } catch (err) {
            console.error(err)
            alert('删除失败，请稍后重试')
        } finally {
            this.deleting = false
        }
    }
},
}
</script>

第三步：调用组件并绑定回调 #

• 修改blade模板，传入要删除的资源ID，绑定删除成功回调：

<div id="app">
    <!-- delete-id替换为你实际要删除的资源ID，比如后端输出的{{ $data->id }} -->
    <modal-component :delete-id="{{ 实际资源ID }}" @delete-success="handleDeleteSuccess"></modal-component>
</div>

• 如果是列表场景，可以把模态框放在列表外层，点击对应行的删除按钮时把当前行ID传给模态框即可，不需要每条数据渲染一个模态框。
• 在app.js的Vue实例中新增删除成功后的回调方法：

const app = new Vue({
el: "#app",
methods: {
    handleDeleteSuccess() {
        // 这里可以写刷新列表、重新拉取数据的逻辑，也可以直接刷新页面
        location.reload()
    }
}
});

内容的提问来源于stack exchange，提问作者Ryry