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.

Sign up for GitHub

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

Jump to bottom

Calling slot not being removed the first time #1965

Closed
pdcmoreira opened this issue Dec 4, 2015 · 3 comments
Closed

Calling slot not being removed the first time #1965

pdcmoreira opened this issue Dec 4, 2015 · 3 comments
Labels
bug

Comments

@pdcmoreira
Copy link

I'm trying out components with slots and something weird is happening.
My component is a bootstrap modal, I made it work by passing the boolean prop showEditStateModal which shows or hides the modal. It has a header, body (default) and a footer slot.

The problem is, the first time I open the modal after the page load, it correctly copies the slot div to the right place, but also copies it to the default slot (body).
The dom looks like this:

<div class="modal-content">
    <div class="modal-header undefined">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title">edit state</h4>
    </div>
    <div class="modal-body">
        <p slot="footer">x</p>
    </div>
    <div class="modal-footer">
        <p slot="footer">x</p>
    </div>
</div>

After I close the modal, it correctly copies the element to the footer only. It's only the first time that I open the model that the problem happens.

Also, theres another problem, since I'm not giving any content besides the footer slot, the default slot (body), that is in the component's template, should be printed. So I should see "xyz" in the body, but it's empty.

Here are my templates:

Parent:

<modal v-bind:show.sync="showEditStateModal" title="edit state">
    <p slot="footer">x</p>
</modal>

Component:

<script type="x-template" id="modal-template">
    <div class="modal fade" tabindex="-1" role="dialog"
        v-modal="show"
        v-if="show">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header {{headerClass}}">
                    <slot name="header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title" v-if="title" v-text="title"></h4>
                    </slot>
                </div>
                <div class="modal-body">
                    <slot>xyz</slot>
                </div>
                <div class="modal-footer">
                    <slot name="footer"></slot>
                </div>
            </div>
        </div>
    </div>
</script>
@pdcmoreira
Copy link
Author

I found the culprit to be the v-if="show". Without it, it works as expected.
For the second "problem", I've read the documentation again and it doesn't say that we can mix a "fallback" slot with named slots. I assumed that it would let me do that, but I was wrong.

@yyx990803
Copy link
Member

Can you make a jsfiddle reproduction?

@pdcmoreira
Copy link
Author

http://jsfiddle.net/p2ezf08f/1/

I kind of understand why it has that behavior, so maybe it's working as intended.
Also, as I said, in the docs it doesn't say that we can do that, so I guess we can't.

yyx990803 added a commit that referenced this issue Dec 9, 2015
@yyx990803
should fallback on default slot if no content is left (#1965)
9edb358
@yyx990803 yyx990803 added the bug label Dec 9, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@yyx990803 @pdcmoreira