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

Question

I'm expecting to make a v-for loop with slot in a child component. How can I pass the data looped to the child component ? The data uses a table html template.

// parent component

<template v-slot:delaysBody="{ delaysBody }">
  <div v-for="d in delayBody" :key="d.id">
    <td>{{delaysBody.reason}}</td>
  </div>
</template>

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

//child component

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

props: ['body']


// I had read this approach chould work, but it doesn't

<template v-for="(reasonBody, index) of Object.keys($slots)" :key="index" v-slot:[reasonBody]>
  <td scope="col"></td>
</template>
//

Answer 1

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.