1

I'm got a vuetify v-data-table that has the expandable icon on each item currently. It works fine but I'm interested in having the icon only on rows where a certain condition is true about the item and I can't seem to work out how to do it.

I've got:

<v-data-table
    ref="table"
    :headers="headers"
    :items="events"
    :search="search"
    loading="false"
    :single-expand="true"
    show-expand
    item-key="uuid"
    :expanded.sync="expanded"
    class="elevation-1"
>

  <template v-slot:expanded-item="{ headers, item }" >
      <slot v-if="item.showTxnID">
        <td :colspan="headers.length/2" >
          <v-layout justify-center>
            <v-btn class="primary--text" @click="searchTxn(item.txnID)" ref="txnIDText">Search txn: <strong>{{item.txnID}}</strong></v-btn>
          </v-layout>
        </td>
      </slot>
  </template>
</v-data-table>

The condition I am interested in is: item.showTxnID being true. I've got this working on the slot but it would be great if the expand item drop down didn't show at all for these rows.

When I add this condition to the tag above, the event table load fails and it fails with the following error: Failure

Any help would be much appreciated, thanks!

Rob

Mee
  • 129
  • 2
  • 10

0 Answers0