Vue: Undefined slots when adding slots without v-for

Created on 23 Feb 2017  ·  5Comments  ·  Source: vuejs/vue

Vue.js version

2.1.10

Reproduction Link

https://jsfiddle.net/Wlada/Lhjqac8p/ - NOT WORKING
https://jsfiddle.net/Wlada/v92nth71/ - WORKING

Steps to reproduce

On my jsfiddle examples inside console you will see number of printed slots.

In first js fiddle link I added slot items without v-for directive. Number of slots is wrong .

In second example where slot items are rendered with v-for directive. Number of slots here is right.

What is Expected?

In my mind I'm expecting to get same number of slots when adding slots without v-for directive

What is actually happening?

Number of slots is wrong. For 3 slots items number of slots is ((slot_items * 2) - 1)

Am I doing something wrong, or this is a bug ?

Thanks

Most helpful comment

This is expected behavior. To ensure the exact same visual output from the template, VNodes are created for whitespaces too.

You can filter for non-text nodes by checking the presence of vnode.tag. Or, if you don't want any whitespaces at all, use vue-loader with preserveWhitespace: false.

All 5 comments

Hi thanks for reporting the issue.
It looks like something is wrong because text nodes are also being included in the default slot

@posva seems to be expected behaviour, when we look at the following code in the transition component:

https://github.com/vuejs/vue/blob/dev/src/platforms/web/runtime/components/transition.js#L84-L89

~maybe that's why it has never been noticed~ 😆
ping @yyx990803

edit: I didn't check they were empty!

This is expected behavior. To ensure the exact same visual output from the template, VNodes are created for whitespaces too.

You can filter for non-text nodes by checking the presence of vnode.tag. Or, if you don't want any whitespaces at all, use vue-loader with preserveWhitespace: false.

Thank you all for your help!

Was this page helpful?
0 / 5 - 0 ratings