Inertia.js删除路由未触发onSuccess()，DataTable无法重建

当控制器返回重定向时，Inertia会导航到目标页面，原组件实例会被销毁，你定义在destroy请求里的onSuccess回调所在的上下文已不存在，因此无法触发，导致DataTable无法重建。

方案一：返回成功响应而非重定向，前端本地更新数据 #

这种方式不需要页面跳转，直接在请求成功后更新本地数据并重建DataTable。

前端代码修改 #

deleteSubmit(id) {
    this.accountsDataTable.destroy();
    // 提前过滤出删除后的数据集
    const updatedInstallers = this.installers.filter(item => item.id !== id);
    
    Inertia.destroy(route('installers.destroy', {id: id}), {}, { 
        onSuccess: () => {
            // 更新本地数据
            this.installers = updatedInstallers;
            // 重建DataTable
            this.accountsDataTable = $('#table').DataTable({
                columnDefs: [{
                    target: 1
                }]
            });
            // 手动提示删除成功
            console.log('Installer was successfully deleted.');
        }
    })
},

后端控制器修改 #

// 执行删除逻辑后
return response()->json(['success' => 'Installer was successfully deleted.']);

方案二：保留重定向，在组件生命周期钩子中初始化DataTable #

重定向回列表页时，组件会重新挂载，将DataTable的初始化逻辑放到生命周期钩子中，确保页面刷新后自动重建表格。

前端组件代码 #

export default {
    data() {
        return {
            accountsDataTable: null
        }
    },
    props: {
        installers: {
            type: Array,
            required: true
        }
    },
    mounted() {
        this.initDataTable();
    },
    beforeUnmount() {
        // 组件卸载前销毁DataTable，避免内存泄漏
        if (this.accountsDataTable) {
            this.accountsDataTable.destroy();
        }
    },
    methods: {
        initDataTable() {
            this.accountsDataTable = $('#table').DataTable({
                columnDefs: [{
                    target: 1
                }]
            });
        },
        deleteSubmit(id) {
            Inertia.destroy(route('installers.destroy', {id: id}), {}, { 
                preserveScroll: true // 可选：保留当前滚动位置
            })
        }
    }
}

后端控制器保留原重定向 #

// 执行删除后
return redirect()->route('installers.index')->with('success', 'Installer was successfully deleted.');

注意：无需设置preserveState: true，否则会保留旧组件状态，导致新数据无法及时渲染。

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