Datatable expansion: incorrect card height when using v-for inside expansion card

[stockcj]

Steps to reproduce

1. Create a datatable with at least 2 rows of data (not including header)
2. Use the expand slot to create expandable rows within a datatable (as per example 5 - https://dev.vuetifyjs.com/components/data-tables)
3. Add a v-for to an element inside the v-card for the expansion template (make sure that you end up with more than one line of text in your card)
4. Select a row to trigger the expansion. This row will always expand over the table, whereas the rest of the rows in table will expand within the table (i.e. push the remaining rows down).

Versions

Vue - 2.4.2 Vuetify - 0.16.0-beta.3 Tested in latest versions of Chrome and Firefox

What is expected ?

All row expansion cards expand within the table, rather than over the top of it.

What is actually happening ?

The first selected row is expanding over the top of the table, instead of within it. It will always behave this way.

Reproduction Link

https://codepen.io/stockzy/pen/jGGYdK?editors=1010

[KaelWD]

selected updates after the card is already open, you should use props.item instead: https://codepen.io/anon/pen/ZXXrjG?editors=1010

[wernerm]

An error is thrown when sorting any column after expanding any row, and then trying to expand any row again. It is reproducible in your codepen.

[jacekkarczmarczyk]

https://github.com/vuetifyjs/vuetify/issues/1991 for the sorting issue

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord