Laravel Inertia中Flash消息返回null问题排查求助

我有一个订单列表页面，点击指定订单会在模态框中展示对应订单项，用户可修改生产状态。当前问题是：修改状态后应返回Flash消息updateOrder:200，但实际返回null。

这个问题是在Order组件中过滤order_items后出现的——如果不直接使用过滤后的order_items传递给OrderDetails组件，Flash消息会先显示null，之后变为updateOrder:200并正常触发提示。我尝试将updateStatus改为异步函数，但问题仍未解决。

相关代码 #

Order.vue #

<template>
    <AuthenticatedLayout>
        <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <div class="bg-base-300 overflow-hidden shadow-sm card">
                    <div>
                        <div class="overflow-x-auto">
                            <table class="table">
                                <!-- head -->
                                <thead>
                                    <tr>
                                        <th>No</th>
                                        <th>Name</th>
                                        <th>Order ID</th>
                                        <th>Track code</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- row 1 -->
                                    <tr
                                        v-for="(order, no) in orders"
                                        :key="order.id"
                                        @click="showDetailModal(order.id)"
                                        class="hover:cursor-pointer hover:bg-neutral"
                                    >
                                        <td>
                                            {{ no + 1 }}
                                        </td>
                                        <td>{{ order.name }}</td>
                                        <td>{{ order.id }}</td>
                                        <td>{{ order.track_code }}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div v-if="showModal">
            <DetailsModal
                @close="showDetailModal()"
                :OrderItem="selectedOrderItems"
            ></DetailsModal>
        </div>
    </AuthenticatedLayout>
</template>

<script>
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout.vue";
import DetailsModal from "@/Pages/Order/Modal/OrderDetails.vue";
import { ref, onUpdated } from "vue";
export default {
    components: {
        AuthenticatedLayout,
        DetailsModal,
    },
    props: ["orders", "order_items"],
    setup(props) {
        const selectedOrderItems = ref([]);
        console.log(props.orders);
        console.log(props.order_items);
        const showModal = ref(false);
        return { showModal, selectedOrderItems };
    },
    methods: {
        showDetailModal(orderId) {
            this.selectedOrderItems = this.order_items.filter(
                (item) => item.order_id === orderId
            );
            this.showModal = !this.showModal;
        },
    },
};
</script>

OrderDetails.vue #

<template>
    <div class="backdrop">
        <div
            class="bg-base-100 text-center w-[90%] h-fit m-auto mt-[3%] mb-[2%] overflow-auto rounded-md"
        >
            <div class="flex flex-col">
                <div class="text-end justify-end p-2">
                    <button
                        class="btn btn-sm btn-square btn-outline"
                        @click="closeModal()"
                    >
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            class="h-6 w-6"
                            fill="none"
                            viewBox="0 0 24 24"
                            stroke="currentColor"
                        >
                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                stroke-width="2"
                                d="M6 18L18 6M6 6l12 12"
                            />
                        </svg>
                    </button>
                </div>
                <div class="p-5">
                    <div class="overflow-x-auto">
                        <table class="table">
                            <!-- head -->
                            <thead>
                                <tr>
                                    <th>No</th>
                                    <th>Furniture Image</th>
                                    <th>Furniture Name</th>
                                    <th>Furniture Color</th>
                                    <th>Furniture Status</th>
                                    <th>Qty Order</th>
                                    <th>Total Price</th>
                                    <th>Update Production Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- row 1 -->
                                <tr
                                    v-for="(items, no) in OrderItem"
                                    :key="items.id"
                                    class="hover:cursor-pointer hover:bg-neutral"
                                >
                                    <td>
                                        {{ no + 1 }}
                                    </td>
                                    <td>
                                        <div class="w-fit h-fit">
                                            <img
                                                class="w-20 h-20"
                                                :src="'storage/' + items.image"
                                                :alt="items.image"
                                            />
                                        </div>
                                    </td>
                                    <td>{{ items.description }}</td>
                                    <td>{{ items.color }}</td>
                                    <div v-if="items.preorder === 'true'">
                                        <td>Pre-Order</td>
                                    </div>
                                    <div v-else>
                                        <td>In Stock</td>
                                    </div>
                                    <td>{{ items.qty }}</td>
                                    <td>${{ items.total_price }}</td>
                                    <td>
                                        <select
                                            class="select select-info w-fit"
                                            v-model="items.selectedOption"
                                            @change="
                                                // items.isSelectChanged = true
                                                updateStatus($event, items.id)
                                            "
                                        >
                                            <option :value="items.status">
                                                {{ items.status }}
                                            </option>
                                            <option
                                                v-for="(
                                                    option, index
                                                ) in items.filteredOptions"
                                                :key="index"
                                                :value="option"
                                            >
                                                {{ option }}
                                            </option>
                                        </select>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { ref } from "vue";
import { router, usePage } from "@inertiajs/vue3";
import { onUpdated } from "vue";
import Swal from "sweetalert2";
export default {
    props: ["OrderItem"],
    setup(props) {
        const options = [
            "In Production",
            "Opening",
            "Treated",
            "Finishing",
            "Wrapped",
            "Shipped",
        ];
        onUpdated(() => {
            console.log(usePage().props.flash.message);
            if (usePage().props.flash.message == "updateOrder:200") {
                Swal.fire({
                    icon: "success",
                    title: "Item status updated successfully",
                    showConfirmButton: false,
                    timer: 1500,
                });
                router.get(route("order.index"));
            }
        });
        props.OrderItem.forEach((item) => {
            item.selectedOption = item.status;
            item.isSelectChanged = false;
            item.filteredOptions = options.filter(
                (option) => option !== item.status
            );
        });
        return { OrderItem: props.OrderItem, options };
    },
    methods: {
        closeModal() {
            this.$emit("close");
        },
        updateStatus(e, id) {
            const status = e.target.value;
            const itemId = id.toString();

            router.post(route("order.update"), {
                _method: "patch",
                id: itemId,
                status: status,
            });
        },
    },
};
</script>

HandleInertiaRequests.php #

<?php

namespace App\Http\Middleware;

use Illuminate\Http\Request;
use Inertia\Middleware;

class HandleInertiaRequests extends Middleware
{
    protected $rootView = 'app';

    public function version(Request $request): string|null
    {
        return parent::version($request);
    }

    public function share(Request $request): array
    {
        $user = $request->user();
        return [
            ...parent::share($request),
            'auth' => [
                'user' => $user ? $user->only(['uuid','role','name']) : null,
            ],
            'flash' => [
                'message' => fn () => $request->session()->get('message')
            ],
        ];
    }
}

已尝试的解决方案 #

将updateStatus改为异步函数，但问题仍未解决：

async updateStatus(e, id) {
    const status = e.target.value;
    const itemId = id.toString();

    await router.post(route("order.update"), {
        _method: "patch",
        id: itemId,
        status: status,
    });
}

内容的提问来源于stack exchange，提问作者cherno304