Vuetify: [Bug Report] Data-Table rows not expanding

[Chris0lsen]

Versions and Environment

Vuetify: 0.17.7
Vue: 2.5.13
Browsers: Chrome 63.0.3239.132
OS: Windows 7

Steps to reproduce

1) Create a data-table with slots for no-data, no-results, header, items, and expand
2) Set an @click event to toggle the props.expanded value of the table
3) Create a row within the "expand" slot with extra data
4) Attempt to expand the row

Expected Behavior

The row expands, displaying the content within the "expand" slot.

Actual Behavior

props.expanded is toggled correctly, but the expanded content is not rendered.

Reproduction Link

https://codepen.io/chris0lsen/pen/JpGOOx?editors=1111

Other comments

Vue throws the following error in the console:
"[Vue warn]: <transition-group> children must be keyed: <div>"

EDIT: markdown was hiding the html element names in the pasted error message

Inspecting with Vue Devtools shows a transition-group with {appear:false} in each row.

Also, the data-table's data has a property called "expanded" with a default value of {}, which changes to a value of {"undefined":true} when "props.expanded" is toggled - but changing this to either true or false doesn't seem to have an effect.

[nekosaur]

You've specified the item-key to be value but that property does not exist on the item you pass to the table. Switch it to foo, bar, ex_foo or ex_bar and it will work.

[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