Iterating slot content for iterated slots in child component in Vue.js

Question

I've got a child component (that I cannot edit) where each row in an object is rendered inside a div with a specific slot, and I'd need to pass data from the parent for each of those elements. I'm trying to iterate through every element of the object in the parent component, generate a slot and pass the desired code to the child, but unfortunately I can't manage to and I can't find any material to support me.

The child component:

<div class="slotchildren" v-for="(child, childindex) in row.elementChildren" :key="childindex">

  <span>element nr. {{child.id}}</span>
  <slot :name="`element-child-${row[idlabel]}-${childindex}`" :row="child">
    ...
  </slot>
</div>

The parent component (not working):

<template v-for="row in rows"> -->
  <template  v-slot:`element-row-${row.id}`="{row}">
        
        //--> [vue/valid-v-slot] 'v-slot' directive doesn't support any modifier
        //--> [vue/valid-v-slot] 'v-slot' directive must be owned by a custom element, but 'template' is not.

    <span>{{row.name}}</span>

  </template>
</template>

Is something like this feasible and how? If it's not, what could be a viable workaround, consideind that I can't edit the child component?

Thanks in advance.

Answer 1

I solved it with the following synthax:

<template v-for="row in rows" v-slot:[`element-row-${row.id}`]>
  ..
</template>