vuetify
vuetify copied to clipboard
[Bug Report][2.6.12] Cannot create eager expansion panel from v-data-table
Environment
Vuetify Version: 2.6.12 Vue Version: 2.7.13 Browsers: Chrome 107.0.0.0 OS: Linux x86_64
Steps to reproduce
Description: I have a table with expansion panels. Each expansion panel contains a cutom vue component. I need each of those custom vue components 'created' methods to be called as soon as the table is created.
Issues:
- There is no 'eager' prop to achieve this in v-data-table.
- There is an 'eager' prop in https://vuetifyjs.com/en/api/v-expansion-panel-content/ but there is no way to access it from the v-data-table.
- I am forced to create custom code to loop through all records, expand them, and then close them. This is undesirable and showcases another bug, mentioned below
- There is an issue with paging and creating the custom vue components in the expansion section. If the paging shows records 1-10, then only the first ten records will have their created method called. If there is an 11th, 12th, etc record, their created methods will not be called. This is demonstrated in the codepen link above. You can look at the console output and you will never see the 11th record's created() function called, even though there are 11 records in the expanded.sync object
Expected Behavior
I expect an eager property to exist on the v-data-table which maps to the v-expansion-panel-contents eager property and for it to work regardless of paging
Actual Behavior
There is no way to access the eager property and my workaround is too buggy to use due to paging issues