Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ComputedRef and v-for typescript type inference #12095

Open
tiredenzo opened this issue Oct 1, 2024 · 2 comments · Fixed by vuejs/language-tools#4902 · May be fixed by #12272
Open

ComputedRef and v-for typescript type inference #12095

tiredenzo opened this issue Oct 1, 2024 · 2 comments · Fixed by vuejs/language-tools#4902 · May be fixed by #12272

Comments

@tiredenzo
Copy link

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_
@edison1105
Copy link
Member

/cc @KazariEX

@tiredenzo
Copy link
Author

Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants