Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug Report][3.7.5] VTreeView slots [subtitle, divider, header, subheader] are not working #20781

Open
jakubmatisak opened this issue Dec 16, 2024 · 4 comments

Comments

@jakubmatisak
Copy link

Environment

Vuetify Version: 3.7.5
Vue Version: 3.5.13
Browsers: Chrome 131.0.0.0
OS: Windows 10

Steps to reproduce

I'm trying to do some customization to VTreeView using slots, but: subtitle, divider, header, and subheader are not doing anything when I use them.
At least they should print something, but nothing happens.

Expected Behavior

To do something.

Actual Behavior

Nothing happens.

Reproduction Link

https://play.vuetifyjs.com/#...

@MatthewAry MatthewAry added T: bug Functionality that does not work as intended/expected T: documentation labels Dec 17, 2024
@MatthewAry MatthewAry added the C: VTreeview VTreeview label Dec 17, 2024
@MatthewAry
Copy link
Contributor

This is likely a bug caused by incomplete functionality.

Slots are getting sent here:

And their types are getting defined at:

However, I think the signature is incorrect. It doesn't really make sense to me to see these slots on the TreeView component, they seem more appropriate on the children if at all.

@KaelWD KaelWD removed the T: bug Functionality that does not work as intended/expected label Dec 17, 2024
@KaelWD
Copy link
Member

KaelWD commented Dec 17, 2024

The slots do work, you just need to have a subtitle or whatever on the items in the first place.

@jakubmatisak
Copy link
Author

Thank you for response,

But, why should I have it in :items? Shouldn't slot "subtitle" of whatever v-slot I use just override subtitle?
I have tested it also with this example, and even if it is in items (it was also in previous example in first child) I can't see it.

It may be was not clear from previous post, but slots for title, prepend, append, and default are working as expected.
Only subtitle, divider, header and subheader are not.

https://play.vuetifyjs.com/#eNqNkTFvwjAQhf/KKUtACkVAJysgVZ07degADE58VSyZxLIvbiWU/15jMCSUSCxx7t7L9+K77TGxppy/af3iWkxYkhMetOKEm10NkLsZGUQn8QeY9JJd75Jw7hI4nTPHVYunpvAdXpJ0nHihzp97QMSBm1nVELNtQZK8Dhby+SDsgVtIJwWaDYgnzBXy4K2e8PrfiHb7z5/Pb9f2jYHqS1saqSk48Vc3hkDgN28VwfGcJvwIGEymsN7A5NKDMC7LYBtriPaLLBgssn4nzIlB6pejZMlJNrUFlg48cZze9tkWH1zWQ72spBIG60FuyA6By+ya8s4V1oIbYMC1TrM79CKFbkCOiFUPUZnmgCOA5Rjg9Qb4wsJSYw4jiNU9Yt+rbkrsdtPw0p02eN1Z0mV1q1R47P8A7mXpaA==

I may be wrong of course, but could you please provide example how to use it properly then? Because from now I have absolutely no clue.
Thanks.

@KaelWD
Copy link
Member

KaelWD commented Dec 18, 2024

Ok yeah some of them don't work, I assumed treeview reused VListChildren instead of a separate implementation.
Subtitle needs item-props or :item-props="item => ({ subtitle: item.subtitle })"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants