Subscribe on changes!

keyof generic doesn't work in template

avatar
Oct 1st 2023

Vue version

^3.3.0

Link to minimal reproduction

https://play.vuejs.org/#eNp9k1Fv2jAQx7/KNZo6QBA29S1LqbaqD920rep4a3hIkwu4JOfIdhgozXfv2SEQ2qo8JNj/v+9+vrvU3vey9DcVeoEXGizKPDY4iygyYSo2sJmI7DLySKao/RxpaVaR52Q2dHZ2ZVKxbWB9Y7DPW0pxOwRBbqUjD4I17vahnHiIw5FWX2d1bRWf4gKbJpzyzkHtgcAnnUuj/RSzuMoNnJ/D4CxZiTxVSNeyIvMLd/D87LI+vBYWQ45wiMuRzyYTmK+EhlSihkeF8RrMrkSdKFEamEz6ZpuZOR4FpUxSuxTQ2Ijh1GpH4CkTH1c2yW+pEBJJBqkXNpyeVnx/7nSbwj2NRlOVkMe05PTGlnSJhEokvJwDbjl2quEeE6nSUBslaDmGmHazfaVFUUploAYuniC8U7LU0ECmZAGRxyMQed9svsjg1jkF46osThCEM4dzMYO6RXddDWAuHhb2EO+8LvZVANxxmbHHORr74BJoA6VLfdkHCbsUs9lguMeYjkb2BaNjj+izedOm1jO1r6yixAhJcALjxpJZhx284koqajH8N9Nz1Q7P++oCAvjS3Yf77gi4vN6YW8K3y8TSf9KS+HPiZMCFTWRRihzV39KScdsCiwH8i7w4z+X/n27PqArH3X6ywmT9zv6T5s8m4D93CjWqDbfsoJlYLdG08s2/PzwPPbGQaZWz+wPxHrXMK8vY2n5UlDJ2z+dob90U8WzN9Y0dOd1dyoJaZ+P8bqCuP7j6EffCv3DnImq85gWS7ZbQ

Steps to reproduce

No steps required. You should be able to see the highlighted typescript error around line 5. Similar to this one:

imagen

What is expected?

As you can see the expected behavior can be seen in the childrenCount function. The childrenCountKey prop expects a valid object key so its ussage within the template should be very straighforward

What is actually happening?

The template does not accept childrenCountKey as a valid node object key

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (8) x64 AMD Ryzen 7 4700U with Radeon Graphics
    Memory: 2.78 GB / 15.37 GB
  Binaries:
    Node: 18.17.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD
    npm: 7.24.2 - C:\projects\xamu\ui\node_modules\.bin\npm.CMD
  Browsers:
    Edge: Spartan (44.22621.2283.0), Chromium (117.0.2045.43)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    vue: ^3.3.4 => 3.3.4

Any additional comments?

No response

avatar
Oct 1st 2023

Similar to #9277. See also vuejs/language-tools#3204. Changing the usage of props to $props in volar virtual files may resolve this problem

avatar
Oct 25th 2023