CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-componentvuetify.js
Joe B.
Joe B.

Reputation: 820

How to access slot object property to pass into component for a given data table row in Vuetify?

I have a vue data property like so:

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

I have vuetify data table like so:

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

In my orders array, each element has a property called order_id, which I am not displaying in my data table.

When I try and pass item.order_id into my CancelOrderComponent I get the following error:

Cannot read property 'order_id' of undefined

How can I access order_id for a given row in my data table so that I can properly pass it into my CancelOrderComponent?

Upvotes: 0

Views: 796

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

You're missing to add slot props in <template v-slot:['item.actions']>, so you should do :

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

Upvotes: 1

Related Questions