Vuejs Component slot in inline template with props

Question

I have the following example code: This is a vuejs environment with a component called modal. I would like to add a slot for a specific area inside the modal template and add a prop value (in this Example 'modalId') to this slot. But that just doesn't dispay - do nothing happens.

  <template id="modalTemplate">
    <div class="modal fade" :id="modalId" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">@{{ modalHeader }}</h4>
                </div>
                <div class="modal-body">
                    <div v-show="errors !== false" class="alert alert-warning">
                        <div v-for="error in errors">
                            @{{ error }}
                        </div>
                    </div>
                    <slot></slot>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" v-on:click="this.$dispatch('handleform', mData)">Save changes</button>
                </div>
            </div>
        </div>
    </div>
</template>

<modal v-ref:modal :active="active" error="" v-on:handleform="addMember" modal-id="modalAdd" modal-header="Mitglied hinzufügen" :m-data="newMember">
    @{{ modalId | json }}
</modal>

pretty sure you need to wrap the content in a <div> or a <p> tag to ensure Vuejs inserts it - otherwise it doesn't know where content starts and ends (e.g. white space, newlines, tabs could be considered content too) — ierdna

Jeff Jeff · Accepted Answer · 2015-12-03T21:42:24

I have had this issue with Vue as well. According to the documentation, you have done it correctly. Because there is only one <slot> element in your template, the content in your template should be inserted into the <slot>. But instead nothing shows.

Try changing <slot></slot> to <content></content>. I have seen this done both ways in different parts of the documentation.

Otherwise, just give a name to the slot. Something like

<slot name="content"></slot>

Then

<modal v-ref:modal :active="active" error="" v-on:handleform="addMember" modal-id="modalAdd" modal-header="Mitglied hinzufügen" :m-data="newMember">
    <span slot="content">@{{ modalId | json }}</span>
</modal>

Hope one of these works for you.

Vuejs Component slot in inline template with props

1 Answers