I am currently working on a Vuetify data table that showcases order information, with an option for users to cancel their orders by clicking on the cancel icon. Upon clicking the cancel icon, a confirmation overlay pops up displaying the specific order id.
The issue I am facing is that when the overlay appears, it does not update to show the correct order_id based on the row I selected. Instead, it seems to be stuck showing the first order_id in the items array being presented in the data table.
To ensure each row has a unique identifier, I am assigning a distinctive itemKey to every row in the data table.
Can someone guide me on what might be causing this problem and how I can rectify it to display the accurate data for each order?
<v-data-table
v-if="orders.length > 0"
:headers="headers"
:items="orders"
multi-sort
:search="search"
class="elevation-1"
>
<template v-slot:[`item.length`]="{ item }">
<span>{{item.length | transform}}</span>
</template>
<template v-slot:[`item.weight`]="{ item }">
<span>{{item.weight | transform}}</span>
</template>
<template v-slot:[`item.actions`]="{ item }">
<v-icon small @click="cancelOverlay = true" color="red">mdi-cancel</v-icon>
<v-overlay v-if="cancelOverlay">
<v-card light color="#f6f9fc" max-width="1000px">
<v-card-title primary-title>
<div>
<span class="display-1 mb-0 black--text">Are you sure you want to cancel order #{{item.order_id}}?</span>
</div>
<v-spacer></v-spacer>
<v-btn icon dark color="black" @click="cancelOverlay = false">
<v-icon>mdi-close</v-icon>
</v-btn>
</v-card-title>
<v-container>
<CancelOrderComponent :orderId="item.order_id" />
</v-container>
</v-card>
</v-overlay>
</template>
</v-data-table>