如何解决如何在Vuetify中访问插槽对象属性以传递到给定数据表行的组件中?
我有一个vue数据属性,如下所示:
data() {
orders: [],order: {
order_id: null
length: null,width: null,}
}
我有这样的可视化数据表:
<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
中?
解决方法
您缺少在<template v-slot:['item.actions']>
中添加老虎机道具,所以您应该这样做:
<template v-slot:[`item.actions`]="{item}">
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。