Vuetify Data-table expanding all rows on click instead of just the selected row-CodePudding

I have a data-table of items, I'm wanting to expand only the selected row to show extra information but it ends up expanding all existing row items instead.

EDIT Sorry Im wanting to single-expand without the use of the dropdown icon

Here is my code:

    <v-data-table
            v-if="selectedItem"
            dense
            :headers="headers"
            :items="itemsList"
            item-key="name"
            
            single-expand
            mobile-breakpoint="0"
          >

            <template v-slot:item="row">
              <tr
                @click="
                  () => {
                    row.expand(!row.isExpanded);
                  }
                "
              >
                <td>{{ row.item.date}}</td>
                <td>{{ row.item.firstName}}</td>
                <td>{{ row.item.lastName}}</td>
                <td>{{ row.item.email? `Yes` : `No` }}</td>
                <td><v-icon small> mdi-pencil </v-icon></td>
              </tr>
            </template>

            <template v-slot:expanded-item="{ headers, item }">
              <td  :colspan="headers.length">
                <tr v-if="item.date">
                  <h4 style="font-size: 12px">
                    <span style="color: #888"> Issued Date: </span>
                    {{ item.date}}
                  </h4>
                </tr>
                <tr v-if="item.firstName">
                  <h4 style="font-size: 12px">
                    <span style="color: #888"> First Name: </span>
                    {{ item.firstName}}
                  </h4>
                </tr>
                <tr v-if="item.lastName">
                  <h4 style="font-size: 12px">
                    <span style="color: #888"> Last Name: </span>
                    {{ item.lastName}}
                  </h4>
                </tr>
                <tr v-if="item.email">
                  <h4 style="font-size: 12px">
                    <span style="color: #888"> Email: </span>
                    {{ item.email}}
                  </h4>
                </tr>
              </td>
            </template>

CodePudding user response：

You can use the demo provided by vuetify In the website https://vuetifyjs.com/en/components/data-tables/#expandable-rows

Var: expanded=[ ] This is the template

<template> 
 <v-data-table :headers="dessertHeaders" 
:items="desserts" :single-expand="false" :expanded.sync="expanded" item-key="name" show-expand  > 
    <template v-slot:top>
     <v-toolbar flat> 
    <v-toolbar-title>Expandable Table</v-toolbar-title> <v-spacer></v-spacer> 
    <v-switch v-model="singleExpand" label="Single expand"  ></v-switch> </v-toolbar> 
    </template>
     <template v-slot:expanded-item="{ headers, item }">
     <td :colspan="headers.length"> More info about {{ item.name }} </td> 
    </template>
     </v-data-table>
     </template>

If you want to expand row without the use of expand icon you can use this

<v-data-table @click:row="expandRow">
 ... 
</v-data-table>



    expandRow(item, event) { 
    if(event.isExpanded) 
    { var index = this.expanded.findIndex(i => i === item); 
    this.expanded.splice(index, 1) } 
else 
    { this.expanded.push(item); } }