我有一个删除表中记录的按钮，它是有目的的。但我需要在删除后添加一条消息(不是警报)。当我只在 Laravel 中这样做时，效果非常好。但现在我的项目中有 Vue.js，但它不起作用。
它应该返回一个绿色框，上面写着“成功删除记录”，当我在 Laravel 中编写相同的代码时，它的工作效果非常惊人。但对于 Vue.js，它不起作用。
我的blade文件，它扩展了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>
我的 Controller
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(); 函数重新加载页面。但当我尝试从 Controller 重定向时它不起作用。
最佳答案
Ajax 请求不会返回 session 数据，因此您必须为 ajax 请求提供响应替代方案。因此您的代码应如下所示:
Controller
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请求时显示 session ...
关于php - 使用 vue.js 在 laravel 中使用消息重定向，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63833331/