v-for typing issues

[robertmoura]

Vue - Official extension or vue-tsc version

2.1.8

VSCode version

1.94.2

Vue version

3.5.12

TypeScript version

5.6.3

System Info

No response

package.json dependencies

No response

Steps to reproduce

Create a component with the following in it:

<template>
    <div v-for="item in items" :key="item.id" @click="onclick(item)">
        {{ item.name }}
    </div>
</template>

<script lang="ts" setup>
class Foo {

    constructor(public id: number, private _name: string) {}

    get name() {
        return this._name;
    }

}

const items: Foo[] = [];

function onclick(foo: Foo) {
    console.log(foo);
}
</script>

What is expected?

The typing should be correct

What is actually happening?

items is typed as Foo[] which is correct.

item is simplified which is causing the issue. I believe it might be typed as Reactive<Foo> which may be breaking the typing.

Here is the error I'm getting:

Link to minimal reproduction

No response

Any additional comments?

I've notice there are a few issues I've found with generic components as well. I've seen issues with v-for and slots where functions expecting a particular type aren't working. They usually have types like UnwrapRef<T> or Reactive<T>.

[robertmoura]

Similar to #4957

[johnsoncodehk]

Duplicate of #4948