Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Undefined slots when adding slots without v-for #4993

Closed
Wlada opened this issue Feb 23, 2017 · 5 comments
Closed

Undefined slots when adding slots without v-for #4993

Wlada opened this issue Feb 23, 2017 · 5 comments

Comments

@Wlada
Copy link

Wlada commented Feb 23, 2017

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

@posva
Copy link
Member

posva commented Feb 23, 2017

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

@LinusBorg
Copy link
Member

LinusBorg commented Feb 23, 2017

@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

@posva
Copy link
Member

posva commented Feb 23, 2017

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

edit: I didn't check they were empty!

@posva posva removed the bug label Feb 23, 2017
@yyx990803
Copy link
Member

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.

@Wlada
Copy link
Author

Wlada commented Feb 24, 2017

Thank you all for your help!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants