:displayValue="(person) => person.name"; Object is of type 'unknown'.ts(2571)

[StefanGhiban]

What package within Headless UI are you using?

@headlessui/vue

What version of that package are you using?

1.5.0

What browser are you using?

Chrome

Describe your issue

The comboxbox input attribute displayValue has a signature of "displayValue?: ((item: unknown) => string) | undefined", which throws an error in vue with ts. We can't access a property of an object that has type unknown.

[flutcon]

@StefanGhiban , I ran into the same issue - how did you get it solved?

[StefanGhiban]

@flutcon due to the function taking an unknown argument as input, I have used a type assertion as following:

:displayValue="(option) => (option as Test).label"

Test being an interface with key, label and values as attributes.

[faithfulojebiyi]

@StefanGhiban this does not work in vue

[srisar]

The solution proposed is not working on Vue too

[StefanGhiban]

@faithfulojebiyi @srisar It worked fine for me. Do you have a solution or a workaround for this issue?

[hymair]

If you are using this directly in the template it would work out of the box in Vue 3 because it parses templates for typescript.

For Vue 2 you should reference a function in the template :display-value="displayValue" and define that in your script tag.

function displayValue(value: unknown) {
    return (value as YourType)?.someProp ?? ''
}

[ElvisGmz]

:display-value="(person: any) => person.value"

For me works 🤔

[brokuka]

actual bug btw