Q&ALaravel9 (Breeze, InertiaJs, Vue3)で実装しています。
ItemControllerからstoreの際にフラッシュメッセージをセットしているのですが表示されず困っています。
アドバイスいただけますと幸いです。
**■controller **
<?php namespace App\Http\Controllers; use App\Http\Requests\StoreItemRequest; use App\Http\Requests\UpdateItemRequest; use App\Models\Item; use Inertia\Inertia; class ItemController extends Controller { public function store(StoreItemRequest $request) { Item::create([ 'name' => $request->name, 'memo' => $request->memo, 'price' => $request->price, ]); return to_route('items.index') ->with([ 'message' => '登録しました。', 'status' => 'success' ]); } }
■HandleInertiaRequests.php
<?php namespace App\Http\Middleware; use Illuminate\Http\Request; use Inertia\Middleware; use Tightenco\Ziggy\Ziggy; class HandleInertiaRequests extends Middleware { protected $rootView = 'app'; public function version(Request $request) { return parent::version($request); } public function share(Request $request) { return array_merge(parent::share($request), [ 'auth' => [ 'user' => $request->user(), ], 'ziggy' => function () use ($request) { return array_merge((new Ziggy)->toArray(), [ 'location' => $request->url(), ]); }, 'flash' => [ 'message' => fn() => $request->session()->get('message'), 'status' => fn() => $request->session()->get('status') ] ]); } }
■vue側 index.vue
<script setup> import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue'; import { Head, Link } from '@inertiajs/inertia-vue3'; import FlashMessage from '@/Components/FlashMessage.vue'; defineProps({ items: Array }) </script> <template> <Head title="商品一覧" /> <AuthenticatedLayout> <template #header> <h2 class="font-semibold text-xl text-gray-800 leading-tight"> 商品一覧 </h2> </template> <div class="py-12"> <div class="max-w-7xl mx-auto sm:px-6 lg:px-8"> <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg"> <div class="p-6 bg-white border-b border-gray-200"> <section class="text-gray-600 body-font"> <div class="container px-5 py-8 mx-auto"> <div v-if="$page.props.flash.success === 'success'" class="bg-blue-300 p-4"> {{ $page.props.flash.message }} </div> ~~省略~~ </div> </section> </div> </div> </div> </div> </AuthenticatedLayout> </template>
開発環境は、windows10, Docker, wsl2上にプロジェクトファイルを置き、vsodeを使用しています。
よろしくお願いいたします。
【追記】
v-ifがうまくいっていないっぽいです。
回答1件
0
自己解決
v-if="$page.props.flash.success === 'success'
が誤っていました。
v-if="$page.props.flash.status === 'success'
でした！
投稿2022/09/12 09:29
総合スコア227
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。