[Vue3, Typescript] how to properly type v-slot:option?

[petegriffith]

When I use a template to custom render one or several options like so:

typescript infers country to be VNode[] | undefined

It then yells at me that country doesn't have alpha_2 or country_name properties - rightly so, as it thinks country is at best a VNode[]

Thing is, countriesObj is correctly typed, so v-slot:options is where the inference is getting lost. I have tried a bunch of things to retype country but nothing seems to sufficiently overlap with the type VNode[]

Any thoughts? Is this a package issue or a Vue issue?

Thanks

[Papooch]

Encountered this too, even if you type country explicitly, it yells that it's not compatible with VNode[]

<!-- country is still underlined here, saying that Country is not compatible with VNode[] -->
<template v-slot="country: Country">

The only thing that works for me is to type it as any and the error goes away (but I lose all typing)

<template v-slot="country: any">

[cpotey]

Just to chime in that this is still ongoing, and that I'm also experiencing the same

[NisuSan]

This is wotking for me:

<!-- Bar.vue -->
<div>
  <slot name="default" :resizeBar="resizeBar"></slot>
</div>

<!-- Parrent.vue -->
<div>
  <template #default="{ resizeBar }">
    <div @click="() => resizeBar()">
        Close
    </div>
  </template>
</div>

[tvld]

@NisuSan The issue is the type of the slot variables

[heysaad]

found this which seems to be working like charm https://stackoverflow.com/a/71849231/7369310

<template #default="{country} : {country: TCountry}">
  {{ country.name }}
</template>