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.
<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>