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

Reputation: 820

Vue.js - How do I display row specific data using vuetify data table via icon click?

I have a Vuetify data table that displays order data. The last column in each row is an icon the user can click to cancel their order. When the user clicks the cancel icon, they are prompted with a confirm cancel order overlay that displays the order id.

The problem I am having is when my overlay opens, the order_id does not update based on the row I click. It appears to be displaying the first order_id in my items array I am displaying in the data table.

I am using a unique itemKey for each row in the data table.

What am I doing wrong that is preventing me from displaying row specific data for each order?

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

Upvotes: 1

Views: 1196

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

The CancelOrderComponent should be outside the v-data-table component and add another data property named currentOrderId and update it using that click event @click="cancelOverlay = true; currentOrderId=item.order_id;" and reset it like @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>
 
...

script :

data(){
  return{
    currentOrder: null,
   }

}

Upvotes: 1

Related Questions