Dynamic slot name Template error: Type 'QTableSlots' has no matching index signature for type 'string'.ts-plugin(2537) #4668

Activity

1. tomvdk

   added

   pending triage

   on Aug 8, 2024
2. davidmatter

   added

   bugSomething isn't workingSomething isn't working

   🔨 p3-minor-bug

   and removed

   pending triage

   on Aug 8, 2024
3. davidmatter commented on Aug 8, 2024

   

   davidmatter

   on Aug 8, 2024

   Collaborator

   More actions

   Regression from #4478

   Test case

   main.vue

   <template>
     <Child>
       <template #[`action${n}`]="data">
         {{ exactType(data.a, {} as string) }}
       </template>
       <template #[`action2`]="data">
         {{ exactType(data.a, {} as string) }}
       </template>
     </Child>
   </template>
   <script lang="ts" setup>
   import { exactType } from 'tsc/shared'
   import Child from './child.vue'
   
   const n = 1 as const
   </script>

   child.vue

   <template></template>
   
   <script lang="ts" setup>
   defineSlots<{
     action1: (props: { a: string }) => void
     action2: (props: { a: string }) => void
   }>()
   </script>
4. davidmatter

   assigned

   kermanx

   on Aug 8, 2024
5. kermanx commented on Aug 8, 2024

   

   kermanx

   on Aug 8, 2024

   Last edited by kermanx

   Collaborator

   More actions

   Opened #4669 for the type problem.

   About the syntax highlighting problem, I think the current behavior is expected:

   1. IMO, syntax highlighting should be as error-tolerant as possible
   2. complex expression is actually supported in SFC: example
6. johnsoncodehk

   closed this as completedin #4669on Aug 9, 2024
7. dmichaelnm commented on Aug 21, 2024

   

   dmichaelnm

   on Aug 21, 2024

   More actions

   That worked for me.

   function getSlotName(name: string): `body-cell-${string}` {
     return `body-cell-${name}` as unknown as `body-cell-${string}`;
   }
8. kermanx commented on Aug 21, 2024

   

   kermanx

   on Aug 21, 2024

   Collaborator

   More actions

   That worked for me.

   function getSlotName(name: string): `body-cell-${string}` {
     return `body-cell-${name}` as unknown as `body-cell-${string}`;
   }

   This can be simplified to:

   function getSlotName(name: string) {
     return `body-cell-${name}` as const;
   }

   👍React with 👍2Reacted by Dirk Michael and tomvdk
9. tomvdk commented on Aug 23, 2024

   

   tomvdk

   on Aug 23, 2024

   Author

   More actions

   That worked for me.

   function getSlotName(name: string): `body-cell-${string}` {
     return `body-cell-${name}` as unknown as `body-cell-${string}`;
   }

   This can be simplified to:

   function getSlotName(name: string) {
     return `body-cell-${name}` as const;
   }

   This works fine! Thanks!
10. tomvdk commented on Sep 2, 2024

    

    tomvdk

    on Sep 2, 2024

    Last edited by tomvdk

    Author

    More actions

    After 2.1.0 release this is now fixed. No need for the workaround above anymore.

    <template #[body-cell-${actionsKey}]="data"> works fine now.
11. johnsoncodehk

    added a commit that references this issue on Oct 21, 2026

    fix(language-core): keep literal bindings from widening through `__VL…

    ...

    2f192cb