How to get data from controller show?

Hello everyone. A question arose. I use Vue, Inertia. There is a standard model and a controller with index and show methods. The index method loads a page with all the database elements for this model.

But I would like to make sure that when this page clicks on a list item, data is loaded via the orders/{id} router and a modal window with this data is shown as a quick preview. How can this be implemented?

I try method with

redirect()->back()->with()

but it doesn't work because frontend doesn't see the session.

I want to display a list, for example "orders".

In the OrderController and the "index" method

$orders = Order:all();
Inertia:Render('Order/Index',['orders'=>$orders])

What should I do in OrderController and the "show" method?

Thriddle

1 year ago

Level 20

You can return a json object instead of rendering a page.

So instead of this:

    public function show(Order $order)
    {
        return inertia('Order/Show', [
            'order' => $order,
        ]);
    }

you can do something like this:

    public function show(Order $order)
    {
        return response()->json([
            'order' => $order,
        ]);
    }

Then handle the response in the Order/Index.

owlondrugsmobile

1 year ago

Level 13

@Thriddle Should I use the router.get method on the client side?

I don't want to go to another page, I want to get the data and show it on the same page. In Vue, I have a list, when clicking on an element of which, you need to get its full data and output it as a modal window. The modal window component is also loaded and hidden.

Thriddle

1 year ago

Best Answer

Level 20

@owlondrugsmobile

make sure you have the show method in your Laravel routes.

Route::get('order/{order}', [OrderController::class, 'show'])->name('order.show');

Then in your 'Order/Index.vue', when you click an order, make a request to fetch the data. Something like this:

axios
    .get(route('order.show', order->id))
    .then((response) => {
		/* ... do something */
	})
    .catch((error) => {
		console.error('Error fetching data:', error)
		reject(error)
    })

Please or to participate in this conversation.