如何访问插槽对象属性以传递给 Vuetify 中给定数据表行的组件？

Question

我有一个像这样的 vue 数据属性：

data() {
   orders: [],
   order: {
      order_id: null
      length: null,
      width: null,
   }
}

我有像这样的 vuetify 数据表：

<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`]>
 <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 your order?</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>

在我的orders 数组中，每个元素都有一个名为order_id 的属性，我没有在我的数据表中显示它。

当我尝试将item.order_id 传递给我的CancelOrderComponent 时，我收到以下错误：

Cannot read property 'order_id' of undefined

如何访问order_id 以获取数据表中的给定行，以便正确地将其传递到CancelOrderComponent？

Answer 1

您缺少在<template v-slot:['item.actions']> 中添加插槽道具，所以您应该这样做：

<template  v-slot:[`item.actions`]="{item}">