Using vue 3.4.31, vuetify 3.6.12, and vue-tsc 2.0.26. I’m trying to use a custom template with a v-select and when I build I get:
TS2339: vuetify v-select Property 'props' does not exist on type '{ item: ListItem<string>; index: number; }'.
My end goal is to show an svg next to each entry in my dropdown. I have a string array and a function that returns the correct path based on the string. My code is pretty much the same as the VPlay example.
<script>
const myStrings: string[] = ['a', 'b', 'c'];
function getPath(s: string = ''): string {
return 'm 7 15 l 5 -5 l 5 5 h -10 z';
}
</script>
<template>
<v-select :items="myStrings" v-model="selectedString">
<template v-slot:item="{ props, item }">
<v-list-item v-bind="props">
<template #title>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
class="top-icon select-icon"
>
<path
v-bind:d="getPath(item.raw)"
/>
</svg>
{{item.raw}}
</template>
</v-list-item>
</template>
<template v-slot:selection="{props, item }">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
class="top-icon select-icon"
>
<path
v-bind:d="getPath(item.raw)"
/>
</svg>
{{item.raw}}
</template>
</v-select>
</template>
My scripts are the default from running npm create vue@latest
:
"dev": "vite --force",
"build": "run-p type-check "build-only {@}" --",
build-only": "vite build",
type-check": "vue-tsc --build --force",
It works great locally with npm run dev
, but npm run build
gives me the above error. If I skip vue-tsc and do npm run build-only
it builds and runs just fine when deployed. So I’m pretty sure that vue-tsc just isn’t getting the correct information about the v-select slots.
Despite the error, which stops CI/CD scripts, the build is fine. If I copy the dist files to the server myself, everything works.
Any ideas what might be causing this and how to fix it?