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:
Any help would be much appreciated, thanks!
Rob