使用 vue.js 在 laravel 中使用消息重定向答案

【问题标题】：Redirecting with messages in laravel with vue.js使用 vue.js 在 laravel 中使用消息重定向
【发布时间】：2020-12-29 03:59:56
【问题描述】：

我有一个删除表中记录的按钮，它是故意的。但我需要在删除后添加一条消息（不提醒）。当我只在 Laravel 中这样做时，它运行良好。但现在我的项目中有 Vue.js，但它不起作用。

它应该返回一个绿色框，上面写着“成功删除记录”，当我在 Laravel 中编写相同的代码时，它的效果非常好。但是用 Vue.js 就不行了。

我的刀片文件，它扩展了 vue 组件。消息在代码之前。

<body>
        <div id="app">
            <div class="container">
                @if(session('alert_delete'))
                <div class="alert alert-success">
                    {{ session('alert_delete') }}
                </div>
                @endif

                <students>

                </students>
            </div>
        </div>


        <script src="{{asset('js/app.js')}}">

        </script>

我的控制器

public function destroy($id)
    {
        $student = Student::findOrFail($id);

        $student->delete();

        return redirect('/')->with('alert_delete', 'Selected query is deleted successfully.');
    }

Vue删除记录的方法

deleteStudent(id){
                axios.delete(`api/student/`+id)
                location.reload();
            },

我也用它来显示验证错误。但现在，它甚至没有显示简单的成功消息。

它是通过Vue方法上的location.reload();函数重新加载页面。但是当我尝试从控制器重定向时它不起作用。

【问题讨论】：

标签： php laravel vue.js

【解决方案1】：

您使用的消息依赖于刷新到会话的数据，因此您需要使用网络路由来处理删除、将消息刷新到会话并重定向回原始页面。

如果您想在使用 axios 请求处理删除后引发消息，则需要在模板中放置一个元素，以响应 axios 请求引发的事件。

deleteStudent(id){
    axios.delete(`api/student/`+id)
        .then(response => {
            trigger_message();
        });
},

触发警报需要引发您的消息元素订阅的事件。

最简单的方法是将整个内容包装在一个 Vue 组件中，并在消息元素上使用 v-if

Vue 组件

<template>
    <div v-if="deleted" class="alert alert-success">
        Student {{ student.id }} Deleted
    </div>

    <student @click="deleteStudent"></student>

</template>
<script>
    data () {
        return {
            deleted: false
        }
    },
    methods: {
        deleteStudent(){
            axios.delete(`api/student/`+id)
                .then(response => {
                    this.deleted = true;
                });
        },
    },
</script>

这应该是一个很好的起点。您可能还想对警报执行更多操作，例如在其上设置定时淡出。 Bootstrap-Vue's Alert component 是一个很好的选择，文档中有一些很好的示例可以帮助您入门。

【讨论】：

【解决方案2】：

Ajax 请求不返回会话数据，因此您必须为 ajax 请求做出响应替代。所以你的代码应该如下所示：

控制器

public function destroy($id)
{
    $student = Student::findOrFail($id);

    $student->delete();

    if (\request()->wantsJson()) {
        return response()->json([
            'alert_delete' => 'Selected query is deleted successfully.'
        ]);
    }

    return redirect('/')->with('alert_delete', 'Selected query is deleted successfully.');
}

Vue

deleteStudent(id){
    axios.delete(`api/student/`+id).then(response => {
       
       // Message will now be available here:
       response.data.alert_delete

       // You can now display the message to your users using JS notification
       // libraries like SweetAlert2 or toastr.

       // You don't really need this
       location.reload();
    })
},

或

// Set this in data() method of your vue component.
// alert: null

deleteStudent(id){
    axios.delete(`api/student/`+id).then(response => {
       
       // Message will now be available here:
       response.data.alert_delete

       this.alert = response.data.alert_delete

       // You don't really need this
       location.reload();
    })
},

并且仍然在同一个 vue 组件中，像这样显示消息：

<div v-if="alert" class="alert alert-success" v-text="alert"></div>

// You can use a close button to set "alert" back to null if the 
// users wants to clear alert.

因此使用上面的代码，您可以在发出 ajax 请求时显示通知或警报，并在发出常规 HTTP 请求时显示会话...

【讨论】：

当我点击删除按钮时页面不更新，当我发出请求（删除、编辑、创建）时我需要刷新页面。有没有办法解决它？否则你的代码可以工作。
Checkout SweetAlert.js... 它将显示消息，然后当用户单击“确定”清除模式时，您可以在回调中调用 ``。这样会更流畅。