[Vuejs]-How to make a slot with v-for loop Vue js 3?

by

0👍

delaysBody: [{
  id: '1',
  reason: 'text'
}, {
  id: '2',
  reason: 'text'
}]

Parent component template

<ChildComponent>
  <template #delays-body="{ delaysBody }">
    <td v-for="d in delaysBody" :key="d.id">{{d.reason}}</td>
  </template>
</ChildComponent>

Child

<tr v-for="delay in body" :key="delay.id">
  <td scope="col">{{delay.id}}</td>
  <slot name="delays-body" :delaysBody="delaysBody"></slot>
</tr>

Your variable names aren’t making things clearer. You should reconsider the naming.

Leave a comment