I have defined a vue data property as shown below:
data() {
orders: [],
order: {
order_id: null
length: null,
width: null,
}
}
Additionally, I have implemented a vuetify data table structured like this:
<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>
Within my orders array, I have a property called order_id for each element, but I am not displaying it in my data table.
However, when attempting to pass item.order_id into my CancelOrderComponent, I encounter the following error:
Cannot read property 'order_id' of undefined
Is there a way for me to properly access order_id for a specific row in my data table so that I can successfully pass it into my CancelOrderComponent?