Vuetify: Issue with displaying list items inside v-list-group (accordion) when data is not bound initially

[bjendyk]

Steps to reproduce

1. Open the provided example.
2. Click one of the items in the accordion.
3. The promise resolves, but the data that has just arrived is not rendered.
4. Click another item to expand it - now, when the promise resolves, the data is rendered correctly in the expanded container.
5. Refresh the example.
6. Click an item in the accordion - the element is expanded, but no data rendered.
7. Collapse the container and expand it again - this time the data is rendered correctly.

Versions

Environment: Windows 7, Vuetify 0.11, Vue 2.2.2, Chrome 57.0.2987.133, Firefox 53.0.2

What is expected ?

The expected outcome is that whenever the promise is resolved and the data becomes available, the list items are rendered correctly when the list header is expanded for the first time.

What is actually happening ?

What's happening is that the data arrives with the resolved promise, but is not rendered when the container is expanded for the first time. Clicking another accordion item (group), or collapsing/expanding the same container (regardless whether the data is fetched again or not) renders the data correctly.

Reproduction Link

http://codepen.io/anon/pen/aWEXBP

[johnleider]

Expansion panel calculates it's needed height by using scrollHeight at time of click. If your items are dynamically loaded, they are obviously not there when this calculation occurs. It seems like you should catch the click event, prevent default, fetch the data, then propagate your own click event to open the panel.

[bjendyk]

Thank you John for providing some tips. I played around with the example a bit and updated it so that the click is now .stopped (.prevent was not enough) and when the data is ready, the click event is dispatched to v-list-group's v-tile-action - the element receives the event, but it seems that scrollHeight is still 0 because no items are shown.

[johnleider]

Okay, I'll take a look, ty.

[bjendyk]

Got it! I had to wrap the dispatchEvent in Vue.nextTick() and now it works as intended :)

[johnleider]

Awesome. Would you consider this resolved then?

[bjendyk]

Yes, this solves the issue I had 👍

[juppdes]

@bjendyk can you post the solution? (codepen)

[vibrates09]

https://codepen.io/sockhenzie/pen/dqYdgK?editors=1011

[miljacb]

You should just add slot="activator" instead of slot="item". Just for future reference