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

Comments

Projects
None yet
2 participants
@lazabogdan
Copy link

commented Jan 14, 2016

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

@yyx990803 yyx990803 closed this in 7fd665f Jan 14, 2016

@lazabogdan

This comment has been minimized.

Copy link
Author

commented Jan 15, 2016

Thank you! Awesome support

@lazabogdan

This comment has been minimized.

Copy link
Author

commented Jan 15, 2016

@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

This comment has been minimized.

Copy link
Member

commented Jan 15, 2016

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

@yyx990803

This comment has been minimized.

Copy link
Member

commented Jan 15, 2016

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

@lazabogdan

This comment has been minimized.

Copy link
Author

commented Jan 15, 2016

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

This comment has been minimized.

Copy link
Author

commented Jan 15, 2016

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

This comment has been minimized.

Copy link
Member

commented Jan 15, 2016

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

@lazabogdan

This comment has been minimized.

Copy link
Author

commented Jan 18, 2016

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
You can’t perform that action at this time.