用Laravel Vue惯性堆栈中的数据重定向路由

Question

在我的控制器中我有

public function store(Request $request)
{
$postData = $this->validate($request, [
'name' => 'required',
'status' => 'required | boolean'
]);
Room::create([
'name' => $postData['name'],
'active' => $postData['status'],
]);
$message = "Room Added";
return redirect::route('rooms.index', ['msg' => $message]);
}

和我使用'msg'在我的道具

props:['rooms','errors','msg']

但是对于{{msg}}给出的是undefined而不是任何消息

Answer 1

您将msg作为参数传递给您的路由，而不是作为参数传递给您的Inertia::render调用。由于您正在重定向，您可能希望将消息闪烁到会话并在HandleInertiaRequests中间件上处理它。查看文档中的示例。

因此，首先重定向到rooms.index，闪烁消息:

return redirect()->route('rooms.index')->with('message', 'My message');

然后，惯性请求rooms.index路由作为XHR请求，在它击中你的控制器之前，它通过HandleInertiaRequests中间件。

class HandleInertiaRequests extends Middleware
{
public function share(Request $request)
{
return array_merge(parent::share($request), [
'flash' => [
'message' => fn () => $request->session()->get('message')
],
]);
}
}

现在你可以在你的组件中访问它:

<<p>选项API/strong>

<template>
<main>
<header></header>
<content>
<div v-if="$page.props.flash.message" class="alert">
{{ $page.props.flash.message }}
</div>
<slot />
</content>
<footer></footer>
</main>
</template>

<<p>构成API/strong>

<template>
<main>
<header></header>
<content>
<div v-if="message" class="alert">
{{ message }}
</div>
<slot />
</content>
<footer></footer>
</main>
</template>
<script>
import { computed } from 'vue'
import { usePage } from '@inertiajs/inertia-vue3'
export default {
setup() {
const message = computed(() => usePage().props.value.flash.message)
return { message }
},
}
</script>