Inertia onclick navigation inside vue component

I have a laravel/vue project where i am currently displaying a list of orders inside a vue component. Inside this component i want a onclick method where if an order is clicked i redirect to another vue component where i display the orders details. I know i have to send the clicked order as a prop but how i can do this in Inertia? I have been trying for a while now but cant figure it out.

Dashboard component (where i display orders) HTML:

<tr v-for="(order, index) in orders" @click="onOrderClick(order)"
                            v-bind:class="index % 2 === 0 ? 'bg-white' : 'bg-gray-50'">
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                {{ }}
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                                {{ order.deliveryName }}
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                {{ order.createdAt }}

method (tried rendering a view here with inertia but didn't work):

onOrderClick: function (order) {

My route:

Route::get('/order/${}', function (){
return Inertia::render('OrderDetails', 'order');

Read more here:

Content Attribution

This content was originally published by Jack at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: