Subscribe on changes!

looped elements in slot only shown as one element

avatar
Sep 10th 2020

Version

3.0.0-rc.10

Reproduction link

https://jsfiddle.net/8fx5kjh3/

Steps to reproduce

Elements created by a for loop will shown in the slot return as one element. So Image is a Element with child == image.length and the div block:

<CardFlex class="images">
            <Image v-for="(image, index) of this.images" :key="index" :image="image" />
            <div><span></span></div>
</CardFlex>
<script>
import {h} from 'vue';

export default {
    render() {
        console.log('slot');
        console.log(this.$slots);
        const childs = this.$slots.default().map((child) => h('li',{}, [child]));
        console.log(childs)

        return h('ul',{}, childs);
    }
}
</script>

What is expected?

I already use it in Vue 2.x and there I get each element as child of the slot. So I got for 4 images in this constellation 5 li elements with content (4 images 1 div)

What is actually happening?

Currently I have two li elements, one with 4 images and one with the div

avatar
Sep 10th 2020

Duplicate of #2054