So I have an a order table that display order items on the modal,

so whenever I press the certain order, it will display all the ordered items, and the job of the user is changing the production status,

the Issue is, it should be returning flash message updateOrder:200 but it returning null I think I should be adding a synchronous function but I don’t know where should I change to the async function

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>

It happens after I filter the order_items in order component. When I don’t filter the order_items and using order_items instead of selectedOrderItems for OrderItem payload for OrderDetails flash message is returning null at first but it changed to updateOrder:200 instantly and displaying the alert

OrderDetails :

<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"));
                //Set default message to 404 so that sweetalert not showing two times
                // usePage().props.flash.message = "update:404";
            }
        });
        // console.log(props.OrderItem);
        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

namespace AppHttpMiddleware;

use IlluminateHttpRequest;
use InertiaMiddleware;

class HandleInertiaRequests extends Middleware
{
    /**
     * The root template that is loaded on the first page visit.
     *
     * @var string
     */
    protected $rootView = 'app';

    /**
     * Determine the current asset version.
     */
    public function version(Request $request): string|null
    {
        return parent::version($request);
    }

    /**
     * Define the props that are shared by default.
     *
     * @return array<string, mixed>
     */
    public function share(Request $request): array
    {
        $user = $request->user();
        return [
            ...parent::share($request),
            'auth' => [
                'user' => $user ? $user->only(['uuid','role','name']) : null,
                // 'admin' => $request->admin()
            ],
            'flash' => [
                'message' => fn () => $request->session()->get('message')
            ],
        ];
    }
}

I’ve tried to changes the updateStatus function to asynchronous function but it still not working

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,
            });
        },