v-for with named slot (via v-for index) skips first item for 0-based indices

[rask]

Version

2.2.6

Reproduction link

https://codepen.io/Rask/pen/GmZedP

Steps to reproduce

See Codepen. Create a component with a slot repeated over v-for and named with the index, then render the slot elements in the parent component using matching indices. Set the index to be 0..n integers (i.e. a non-associative array).

What is expected?

All elements that are rendered with v-for and slot index should be rendered properly from the parent component data.

What is actually happening?

The very first element defined with v-for is somehow skipped when rendering.

---

I'm building a modular repeater field where you can add and remove items which are synced via basic events. The items are slotted in via item indices which are in sync by setting the slot index inside the custom component when rendered inside the parent.

Can this be related to 0-based indices or something? When I replace the slot name with :name="'item' index" the rendering works as expected.

[posva]

It looks like it is ignored because of the value being falsy. Casting it to a string solves the issue too:

<slot v-for="(value, index) in items" :name="''+index"></slot>

[posva]

I'm not sure if we should allow slot names to be something else than strings, thought. For your use case it's better to use o scoped slot btw https://vuejs.org/v2/guide/components.html#Scoped-Slots

[rask]

I see. I would like to see integer 0 as a possible value as it would simplify components that allow lists to be rendered in slots that can be rearranged and what not. Using the string casting works for me now, but I'll take a look at the scoped slots documentation too. Many thanks! :)

[posva]

components that render lists are one of the use case for scoped slots 🙂