Subscribe on changes!

v-for slots only get one object when visiting `ctx.slots.defalut()`

avatar
Feb 22nd 2021

Version

3.0.5

Reproduction link

Vue2 [as expected]:https://codesandbox.io/s/suspicious-zhukovsky-35nb3?file=/src/App.vue Vue3 [not expected]:https://codesandbox.io/s/sad-proskuriakova-xledk?file=/src/App.vue

Steps to reproduce

Parent:App.vue

<template>
  <HelloWorld msg="Hello Vue 3 in CodeSandbox!">
    <div>0</div>
    <div v-for="item in [1, 2, 3, 4, 5, 6, 7, 8, 9]" :key="item">
      {{ item }}
    </div>
  </HelloWorld>
</template>

Child:HelloWorld.vue

<template>
  <div class="hello">
    <slot />
    <h1>ctx.slots.default().length: {{ slotsLenth }}</h1>
    <h1>can't visit all slost by using ctx.slots.default()</h1>
  </div>
</template>

ctx.slots.defalut() returns an array which only has 2 object. expect 10.

What is expected?

get all slots objects when using ctx.slots.defalut()

What is actually happening?

only get one

avatar
Feb 22nd 2021

This is because v-for will generate a Fragment node.

avatar
Feb 22nd 2021

@HcySunYang Thank you for replying! So what is the best way to visit all v-for slots?

avatar
Feb 22nd 2021

You need to manually crawl the Fragment's children, see https://codesandbox.io/s/bold-sunset-c0hpg?file=/src/components/HelloWorld.vue