Vue.js - 如何通过图标单击使用 vuetify 数据表显示行特定数据？

Question

我有一个显示订单数据的 Vuetify 数据表。每行的最后一列是一个图标，用户可以单击以取消他们的订单。当用户单击取消图标时，系统会提示他们确认取消订单叠加层，其中显示 order id。

我遇到的问题是，当我的叠加层打开时，order_id 不会根据我单击的行进行更新。它似乎显示了我在数据表中显示的项目数组中的第一个 order_id。

我为数据表中的每一行使用一个唯一的itemKey。

我做错了什么导致我无法显示每个订单的特定行数据？

<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>

Answer 1

CancelOrderComponent 应该在v-data-table 组件之外，并添加另一个名为currentOrderId 的数据属性，并使用该点击事件@click="cancelOverlay = true; currentOrderId=item.order_id;" 对其进行更新，并将其重置为@click="cancelOverlay = false; currentOrderId=-1;"：

<v-data-table
....
<template  v-slot:[`item.actions`]="{ item }">
 <v-icon small @click="cancelOverlay = true; currentOrder=item;" 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 #{{currentOrder.order_id}}?</span>
    </div>
    <v-spacer></v-spacer>
    <v-btn icon dark color="black" `@click="cancelOverlay = false; currentOrder=null;"`>
     <v-icon>mdi-close</v-icon>
    </v-btn>
   </v-card-title>
    <v-container>
    <CancelOrderComponent :orderId="currentOrder.order_id" />
   </v-container>
  </v-card>
 </v-overlay>
</template>
</v-data-table>
 
...

脚本：

data(){
  return{
    currentOrder: null,
   }

}