Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Call Vue Slot by Dynamic name

I have a component called TableContainer with the following dynamically named slots

// ...
<td class="...">
    <slot :name="'statuses-' + item.id" />
</td>

<td class="">
    <slot :name="'actions-' + item.id" />
</td>
//...

I want to call them from the parent component as follows:

<TableContainer :data="people">

  <template v-for="person in people" v-slot:statuses-{person.id}>
     {{ person.status }}  
  </template>

</TableContainer>

This is not working at all.
But when I put it like below, it is working, and painting status on the first row.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

<TableContainer :data="people">

  <template v-for="person in people" v-slot:statuses-1>
     {{ person.status }}  
  </template>

</TableContainer>

Note I have switched v-slot:statuses-{person.id} with v-slot:statuses-1.

How do I call the slot while providing a dynamic name.

I am using Vue 3

>Solution :

Have a look at the syntax for dynamic slot names. Try

  <template v-for="person in people" v-slot:[`statuses-${person.id}`]>
     {{ person.status }}  
  </template>
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading