Wrap every list item in slot without render function or scoped slots

slots

#1

I was trying to find a way how to wrap every list item in slot without using a render function.
Basically solution to Loop with v-for slots.default and How can I wrap each element in a slot?

I came up with this:
Specifiy unique slot name for each list item in parent (just index in this case)

 <wrapper>
  <div v-for="i in 10" :slot="i">
    {{i}} item text 
  </div>
</wrapper>

Wrapper component:
Iterate over slots and bind slot names dynamically

<div v-for="(item, slotName) in $slots">
  <strong> Some wrap stuff </strong>
  <slot :name="slotName">
  </slot>
</div>

Some limitation is ordering because $slots is an object, but that can be solved, too, if you want.
Motivation for this is that both render function and scoped-slots are complicated overkill for this simple “list sugaring” usecase and I find this approach more straightforward and readable.

What do you think? Can this break something? Is it a good idea?


#2

I don’t understand the code examples that you gave.

  • The first one renders a list of elements into the <wrapper> component’s default slot.
  • In the second one, in the <wrpper> component’s template, you loop over $slots, but you will only have one slot default.

I don’t see how that should wrap each item in the default slot with anything.

Generally I stand by my original statement in the second topic that you linked to: this is not possible in templates (extension: without scoped slots), period.


#3

Too bad that it works then :smiley:, I wouldn’t post it otherwise.

First one doesn’t render into default slot - it renders to named slot :slot="i"

But you are right that this is not EXACTLY the solution to iterating over default slot. It’s just a different way of achieving similar result.


#4

Oh, right - I totally missed that. And I actually think this is fine.