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

Named slot is getting inserted twice #2163

Closed
lazabogdan opened this issue Jan 14, 2016 · 8 comments
Closed

Named slot is getting inserted twice #2163

lazabogdan opened this issue Jan 14, 2016 · 8 comments
Labels

Comments

@lazabogdan
Copy link

In the following example, slot1 is getting inserted twice. Is this normal?
Any idea why it's behaving like this?

https://jsfiddle.net/6tc2wzne/

@lazabogdan lazabogdan changed the title Slot is getting inserted twice Named slot is getting inserted twice Jan 14, 2016
@yyx990803 yyx990803 added the bug label Jan 14, 2016
@lazabogdan
Copy link
Author

Thank you! Awesome support

@lazabogdan
Copy link
Author

@yyx990803 Unfortunately it doesn't solve the duplicate insertion for the named slot when using v-else on the unnamed slot. If you update your test you'll see the issue, div[slot="one"] is inserted twice:

it('slot compilation order with v-if', function () {
  var vm = new Vue({
    el: document.createElement('div'),
    template:
      '<test>' +
        '<div slot="one">slot1</div>' +
        'default content' +
      '</test>',
    components: {
      test: {
        template:
          '<div>' +
            '<slot v-if="true"></slot> ' +
            '<slot v-else></slot> ' +
            '<slot name="one"></slot>' +
          '</div>',
        replace: true
      }
    }
  })
  expect(vm.$el.textContent).toBe('default content slot1')
})

@yyx990803
Copy link
Member

Why would you use it this way though? There should be only one default slot.

@yyx990803
Copy link
Member

I changed the test case to yours but it passes for me.

@lazabogdan
Copy link
Author

Hmm, I'll double check if I've got the right commit in the morning.

About the use case, here's a simple example:

<template>
    <div v-show="isVisible" :class="sidebarClass">

        <!-- Scrollable -->
        <div v-if="scrollable" v-scrollable="scrollable">
            <slot></slot>
        </div>

        <!-- Non Scrollable -->
        <slot v-else></slot>

        <slot name="root"></slot>
    </div>
</template>

The idea on this sample is when scrollable is true, wrap the default slot with the scrollable div, otherwise just insert the content directly. I know this can be solved with partials, but why complicate the template with partials when the v-if v-else syntax should just work for simple scenarios like this one, don't you think?

@lazabogdan
Copy link
Author

There should be only one default slot.

Doesn't the v-if v-else syntax ensure that only one default slot makes it in the page, since it's used with two unnamed slots?

@yyx990803
Copy link
Member

Yeah, now I see what you mean. It was confusing with just v-if and v-else though.

@lazabogdan
Copy link
Author

Sorry for the delay. I had the right commit, but I forgot to build it so of course in my project where I was importing Vue and testing, I was using the dist from the 1.0.14 release. So it's all good. Thanks!

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

No branches or pull requests

2 participants