Subscribe on changes!

Slot: v-for slot elements are showing as sub nested slot children (different to static elements)

avatar
Oct 20th 2022

Vue version

3.2.33

Link to minimal reproduction

https://codesandbox.io/s/polished-monad-edii2e?file=/src/components/VForSlotNesting.vue

Steps to reproduce

See the console in the codesandbox provided.

Create a component with a slot. Use that component and put 3 divs as children and notice the slot data for that component is an array of 3 nodes. Now v-for a div 3 times instead and notice the 3 slots are now wrapped in an object.

What is expected?

Slots no matter dynamically rendered children or statically should resemble the same slot data structure.

What is actually happening?

Seems slots are being wrapped because the v-for is considered a layer.

System Info

No response

Any additional comments?

No response

avatar
Oct 20th 2022

For reasons how Vue 3's virtualDOM works, Elements of a loop are wrapped in a Fragment. That's not a bug, it's how it works. You Will need to work with this. You can detect a Fragment like this:

import { Fragment } from 'vue'

if (vnode.type === Fragment) {
  return vnode.children // those are the 3 divs
}