vuetify icon indicating copy to clipboard operation
vuetify copied to clipboard

[Bug Report][2.6.12] Cannot create eager expansion panel from v-data-table

Open UglyHobbitFeet opened this issue 2 years ago • 0 comments

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

Reproduction Link

https://codepen.io/uglyhobbitfeet/pen/dyKGeyz?editors=1011

UglyHobbitFeet avatar Nov 01 '22 15:11 UglyHobbitFeet