Thanks to visit codestin.com
Credit goes to github.com

Skip to content

DefineSlots prevents you from using a ref as dynamic slot name #9317

@dotlogix

Description

@dotlogix

Vue version

3.3

Link to minimal reproduction

https://play.vuejs.org/#eNqNUs1ugzAMfhUrlzKpalX1VlGkbephO3RTu2MuCAyjgwQlputU8e5zgqAcWLUb9vfjL8ZX8VjXi3ODYiNCm5iiJihjlW+lICsFWKSmjqQqqlobgisYzOaQ6KpuCNM5l3FCxRmhhczoCmZsNZNKqhSzQuGx1GTDq1QAhJY2EDzANoJY/cz73mrUlKqNggcnT7SyBJbHlnjADLZucDBzghnElhMwzsyO1+fpmH0VdL5etJpQWQ63jyu03r17R+CzDnN9ypE7B2R5uOw2xXvhgpDJMSFXAKEzhY1iW17h4CNFxCKGJkhj+xFtwq3Pu/iX743+x4RwOUQXc/7dvJWsyBcnqxVfg19El64o0bzVVPDWpNiARxwWl6X+fvU9Mg36ZXnNJyZfE/2TvbieFO8GLZozSjFgFJscqYN3xz1e+HsAK502JbPvgAe0umxcxo721KiUY494Pu2Lv+NC5R92dyFUtn+UC+qYredLwXf8fOfpt7jrxdrr+DRE+wvpRh5J

Steps to reproduce

Create a Vue SFC with <script lang="ts" setup>
Create a ref/computed inside the setup.
Define some slots with defineSlots
Try to create a

What is expected?

Refs/Computed should be allowed as slotNames

What is actually happening?

You get a typescript error telling you that ComputedRef can not be used as indexer.
Strangely enough if I wrap the ref in a reactive and reference it as a field it works totally fine.

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (16) x64 AMD Ryzen 7 3700X 8-Core Processor
    Memory: 15.30 GB / 31.92 GB
  Binaries:
    Node: 18.18.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.1.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 6.19.1 - ~\AppData\Roaming\npm\pnpm.CMD
  Browsers:
    Chrome: 117.0.5938.92
    Edge: Chromium (117.0.2045.43)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    vue: ^3.3.4 => 3.3.4

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