Перенаправление с сообщениями в laravel с помощью vue.js


Перенаправление с сообщениями в laravel с помощью vue.js

10.09.2020 06:48:46 Просмотров 1 Источник

У меня есть кнопка, которая удаляет запись в таблице, и она работает специально. Но мне нужно добавить сообщение после удаления (не предупреждение). Когда я делал это только в Ларавеле, это работало отлично. Но теперь у меня есть 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.');
    }

Способ Вью, чтобы удалить запись

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

Я также использовал это, чтобы показать ошибки проверки. Но теперь он даже не показывает простого сообщения об успехе.

Это перезагрузки страницы с помощью функции location.reload(); на способ вю. Но это не работает, когда я пытаюсь перенаправить с контроллера.

У вопроса есть решение - Посмотреть?

Ответы - Перенаправление с сообщениями в laravel с помощью vue.js / Redirecting with messages in laravel with vue.js

Jon White

10.09.2020 07:13:25

Сообщение, которое вы использовали, зависит от данных, передаваемых в сеанс, поэтому вам нужно будет использовать веб-маршрут для обработки удаления, передачи сообщения в сеанс и перенаправления обратно на исходную страницу.

Если вы хотите вызвать сообщение после обработки удаления с помощью запроса axios, вам нужно поместить в шаблон элемент, который реагирует на событие, вызванное запросом axios.

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

Триггерное оповещение должно было бы вызвать событие, на которое подписывается ваш элемент сообщения.

Самый простой способ-обернуть весь контент в компонент Vue и использовать v-if для элемента message

Компонент 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-отличный вариант для этого, и в документации есть несколько отличных примеров, которые помогут вам начать работу.

Является ответом!
tsommie

10.09.2020 07:20:17

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.');
}

Вью

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();
    })
},

И еще в одном компоненте Вью, отобразить Сообщение, Как так:

<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-запроса...

Помочь в развитии проекта:
Закрыть X