Блог

Главная - Вопросы по программированию - Перенаправление с сообщениями в laravel с vue.js

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

#php #laravel #vue.js

#php #laravel #vue.js

Вопрос:

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

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

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

Ответ №1:

Запросы 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-запроса…

Комментарии:

1. Страница не обновляется, когда я нажимаю кнопку удаления, мне нужно обновить страницу, когда я выполняю запрос (удаляю, редактирую, создаю). Есть ли способ решить это? В противном случае ваш код работает.

2. Проверка SweetAlert.js … Он отобразит сообщение, а затем, когда пользователь нажмет OK, чтобы очистить модальный, который вы можете вызвать ` в обратном вызове. так намного плавнее.

Ответ №2:

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

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

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

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