Vuetify Datables - expanded-item slot transition

2
votes

I'm using Vuetify Datatables and I would like to use a transition on the expanded template. Is there any possibility to use the Vuetify Transition on v-slot:v-slot:expanded-item?

I wasn't able to make the transition work.

Here is my code:

       <template v-slot:expanded-item="{ headers, item }">
            <td :colspan="headers.length">
                <p>ID Transakce: {{ item.transactionId }}
                <p>Stav {{ item.transactionData.state }}</p>
                <p>Podstav {{ item.transactionData.subState }}</p>
            </td>
    </template>

Thanks for you help.

1
vue.jsvuetify.js
<slot> is not a DOM node - so you can not apply a transition on it. The transition must be applied on the parent node - which obviously sits inside the Vuetify code. A workaround is to wrap the slot content inside a <transition> and add v-show on the appropriate nodes inside the transition which you will have to manually toggle synchronously with the row expanding/collapsing. – IVO GELOV
@IVOGELOV In my case the parent node is v-data-table. Should I use the transition on it? – Valentin Emil Cudelcu

1 Answers

4
votes

Transition on expanded-item was removed for 2.x version. There are some issues open on github to to bring its back.

By the way there is a tricky solution posted on codepen: https://codepen.io/webifi/pen/ExxmXbJ