title: Vue.js - How do I display row specific data using vuetify data table via icon click?
body: <p>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 <code>order id</code>.</p>
  <p>The problem I am having is when my overlay opens, the <code>order_id</code> does not update based on the row I click. It appears to be displaying the first <code>order_id</code> in my items array I am displaying in the data table.</p>
  <p>I am using a unique <code>itemKey</code> for each row in the data table.</p>
  <p>What am I doing wrong that is preventing me from displaying row specific data for each order?</p>
  <pre><code>&lt;v-data-table
    v-if=&quot;orders.length &gt; 0&quot;
    :headers=&quot;headers&quot;
    :items=&quot;orders&quot;
    multi-sort
    :search=&quot;search&quot;
    class=&quot;elevation-1&quot;
   &gt;
  &lt;template v-slot:[`item.length`]=&quot;{ item }&quot;&gt;
   &lt;span&gt;{{item.length | transform}}&lt;/span&gt;
  &lt;/template&gt;
  &lt;template v-slot:[`item.weight`]=&quot;{ item }&quot;&gt;
   &lt;span&gt;{{item.weight | transform}}&lt;/span&gt;
  &lt;/template&gt;
  &lt;template  v-slot:[`item.actions`]=&quot;{ item }&quot;&gt;
   &lt;v-icon small @click=&quot;cancelOverlay = true&quot; color=&quot;red&quot;&gt;mdi-cancel&lt;/v-icon&gt;
   &lt;v-overlay v-if=&quot;cancelOverlay&quot;&gt;
    &lt;v-card light color=&quot;#f6f9fc&quot; max-width=&quot;1000px&quot;&gt;
     &lt;v-card-title primary-title&gt;
      &lt;div&gt;
       &lt;span class=&quot;display-1 mb-0 black--text&quot;&gt;Are you sure you want to cancel order #{{item.order_id}}?&lt;/span&gt;
      &lt;/div&gt;
      &lt;v-spacer&gt;&lt;/v-spacer&gt;
      &lt;v-btn icon dark color=&quot;black&quot; @click=&quot;cancelOverlay = false&quot;&gt;
       &lt;v-icon&gt;mdi-close&lt;/v-icon&gt;
      &lt;/v-btn&gt;
     &lt;/v-card-title&gt;
     &lt;v-container&gt;
      &lt;CancelOrderComponent :orderId=&quot;item.order_id&quot; /&gt;
     &lt;/v-container&gt;
    &lt;/v-card&gt;
   &lt;/v-overlay&gt;
  &lt;/template&gt;
  &lt;/v-data-table&gt;
  </code></pre>