vuejs / language-tools

⚡ High-performance Vue language tooling based-on Volar.js
https://marketplace.visualstudio.com/items?itemName=Vue.volar
MIT License
5.56k stars 373 forks source link

vue-tsc 2.0.18: Property 'xyz' does not exist on type 'abc' when using v-for #4386

Closed mlankamp closed 1 month ago

mlankamp commented 1 month ago

Error is happening when I use certain Vuetify components with a v-for loop.

Ok:

<v-chip closable />

Error:

<v-chip v-for="id in items" :key="id" closable>{{ id }}</v-chip>

vscode: image

build output:

> vue-tsc

src/App.vue:10:45 - error TS2339: Property 'closable' does not exist on type 'CreateComponentPublicInstance<Readonly<ExtractPropTypes<{}>>, { items: Ref<number[]>; }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ... 12 more ..., {}>'.

10       <v-chip v-for="id in items" :key="id" closable>{{ id }}</v-chip>

example: https://stackblitz.com/edit/vitejs-vite-weuexn?file=package.json,src%2FApp.vue&terminal=build

mityaua commented 1 month ago

Same problem with Quasar but only after build + type-check (vue-tsc --noEmit -p tsconfig.vitest.json --composite false)

error TS2339: Property 'dense' does not exist on type 'CreateComponentPublicInstance<Readonly<ExtractPropTypes<{}>>, { mobileTableRef: Ref<HTMLDivElement | null>; isLoadingUsers: ComputedRef<boolean>; ... 19 more ...; showDate: (time: string | null) => string; }, ... 17 more ..., {}>'.

<q-item v-for="user in users" :key="user.id" dense class="user border-radius-md column bg-secondary">

TheDutchCoder commented 1 month ago

This also occurs on regular components. In our case in Nuxt 3.

The "solution "is to use :foo="true" instead of foo directly, but that's obviously not how it's supposed to work. We'll skip this version until a fix is released.

mlankamp commented 1 month ago

I first noticed with Vuetify, but my example uses the stackblitz vue-ts template with an extra boolean prop to demonstrate the problem.

robertmoura commented 1 month ago

I'm also getting this issue. There is another issue that is strange as well. I have a component that looks like this:

<custom-component first-second>

Where the attribute firstSecond is a boolean prop. This is producing 2 errors:

Property 'first' does not exist on type ...
Property 'second' does not exist on type ...
Wangijun commented 1 month ago

I also encountered this problem