Skip to content

ComputedRef and v-for typescript type inference #12095

@tiredenzo

Description

@tiredenzo

Vue version

3.4.37

Link to minimal reproduction

https://gist.github.com/tiredenzo/959827c17edd71eed099abdb2f03028d

Steps to reproduce

Description
There appears to be a TypeScript type inference issue when using v-for with ComputedRef in Vue 3. In certain cases, TypeScript incorrectly infers the type of the computed property used within the v-for loop, causing it to include true or other incorrect types in the inferred union.

This results in TypeScript errors like:

Property 'key' does not exist on type 'true | KeyValue[] | ComputedRefImpl<any>'.
Property 'key' does not exist on type 'true'.ts-plugin(2339)

What is expected?

to work 🤘 (render the option)

What is actually happening?

src/components/Test.vue:38:62 - error TS2339: Property 'key' does not exist on type 'true | ComputedRefImpl<any> | KeyValue[]'.
  Property 'key' does not exist on type 'true'.

38       <option v-for="option in element.options" :key="option.key" :value="option.key">
                                                                ~~~

src/components/Test.vue:38:82 - error TS2339: Property 'key' does not exist on type 'true | ComputedRefImpl<any> | KeyValue[]'.
  Property 'key' does not exist on type 'true'.

38       <option v-for="option in element.options" :key="option.key" :value="option.key">
                                                                                    ~~~

src/components/Test.vue:39:19 - error TS2551: Property 'value' does not exist on type 'true | ComputedRefImpl<any> | KeyValue[]'. Did you mean 'valueOf'?
  Property 'value' does not exist on type 'true'.

39         {{ option.value }}
                     ~~~~~

System Info

System:
    OS: Linux 6.6 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
    CPU: (10) arm64 unknown
    Memory: 15.80 GB / 17.54 GB
    Container: Yes
    Shell: 5.2.15 - /bin/bash
  Binaries:
    Node: 21.3.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.8.3 - /home/app/node_modules/.bin/npm
  npmPackages:
    vue: ^3.4.37 => 3.5.10


### Any additional comments?

_No response_

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions