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.5.7] v-breadcrumbs typing broken #19339

Closed
frederikheld opened this issue Mar 5, 2024 · 2 comments · Fixed by #19341
Closed

[Bug Report][3.5.7] v-breadcrumbs typing broken #19339

frederikheld opened this issue Mar 5, 2024 · 2 comments · Fixed by #19341

Comments

@frederikheld
Copy link
Contributor

frederikheld commented Mar 5, 2024

Environment

Vuetify Version: 3.5.7
Vue Version: 3.4.15
Browsers: Firefox 123.0
OS: Ubuntu undefined

Steps to reproduce

Can't exactly reproduce on the playground.

If I do this in my own setup, the first example will render the following breadcrumbs:

{ "title": "foo" } / { "title": "bar" }

This clearly shows that the item has a key title.

The second example will render the following breacrumb (as expected):

foo / bar

But in {{ item.title }} the title will have a curly red underline indicating the following error:

Property 'title' does not exist on type '"foo" | "bar"'.
  Property 'title' does not exist on type '"foo"'.ts-plugin(2339)

I'm using VSCode with the official plugin.

So this seems to be a typing issue.

Expected Behavior

The complete type definition for item in the template (shown by VSCode on hover) is

(property) item: ((arg: {
    item: BreadcrumbItem;
    index: number;
}) => VNode<RendererNode, RendererElement, {
    [key: string]: any;
}>[]) & ((arg: {
    item: "foo" | "bar";
    index: number;
}) => VNode<...>[])

So I would expect it to use BreadcrumbItem type.

I tried to cast it as BreadcrumbItem but didn't find any way to get that type :-(

Actual Behavior

TS - once again - causes way more problems than it solves.

Comment

A third example shows how explicitly creating the item object fixes the TS error. But this is overhead code that should not be necessary.

Reproduction Link

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

@frederikheld
Copy link
Contributor Author

Might be related to #15371

johnleider pushed a commit that referenced this issue Mar 15, 2024
fixes #19339

Co-authored-by: Son Tran <stt@cct-technology.com>
@frederikheld
Copy link
Contributor Author

Thanks a lot for the fix! <3

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

Successfully merging a pull request may close this issue.

1 participant