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

Question

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>

the cancel icon in each row. the rows themselves are not selectable — Joe B.
– Joe B., Commented Aug 24, 2020 at 21:47

Joe B. · Accepted Answer · 2020-08-25 11:54:54Z

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

}

edited Aug 25, 2020 at 11:54

Joe B.

8203 gold badges12 silver badges28 bronze badges

answered Aug 24, 2020 at 21:53

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Joe B. Over a year ago

that's not quite what I want. I still want the cancel order component to only show when the cancel icon is clicked. Your solution still lead me to solving my issue. I've edited your answer with what worked for me

Boussadjra Brahim Over a year ago

i approved your edit , i just gave a first solution and i have been waiting for your feedback in order to improve it

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related