0
103
ViewsSlot stops after certain child element in Vue2
I have two simple vue components and want to use one in the default slot of the other. For some reason it takes only the first element but does not show anything after that. If I put standard before this first element it will show up normal, but if I place if after it will also not be displayed.
The page:
<div id="app">
<v-app>
<v-main>
<gantt-chart>
<div> this is visible </div>
<gantt-row key="1" title="test 1"/>
<div> nothing of this and beyond is shown</div>
<gantt-row key="2" title="test 2"/>
<gantt-row key="3" title="test 3"/>
</gantt-chart>
</v-main>
</v-app>
</div>
<script type="text/javascript">
Vue.component("gantt-chart", httpVueLoader('/plugin_assets/javascripts/components/GanttChart.vue'));
Vue.component("gantt-row", httpVueLoader('/plugin_assets/javascripts/components/GanttRow.vue'));
var app = new Vue({
el: '#app',
})
</script>
gantt-chart.vue:
<template>
<div>
<slot />
</div>
</template>
<script>
module.exports = {
props: [],
name:"GanttChart",
data() {
return {};
},
computed: {},
methods: {},
};
</script>
<style scoped></style>
gantt-row.vue:
<template>
<div>
{{ title }}
</div>
</template>
<script>
module.exports = {
props: ["title"],
name:"GanttRow",
data() {
return {};
},
computed: {},
methods: {},
};
</script>
<style scoped></style>
result:
1 answers
Answer question0
One of the caveats of in-DOM templates is that custom elements cannot be self-closing. The DOM parser sees <gantt-row />, but treats it only as an opening tag. Since the tag is technically not yet closed, it wraps the following elements as children. GanttRow.vue's template has no <slot>, so the nested elements would not be visible. This all occurs before the scripting stage (before Vue receives the DOM for template handling).
For instance, run the code snippet below, and inspect the resulting document:
<div> this is visible </div>
<gantt-row key="1" title="test 1"/>
<div> nothing of this and beyond is shown</div>
<gantt-row key="2" title="test 2"/>
<gantt-row key="3" title="test 3"/>You'll notice that becomes:
<div> this is visible </div>
<gantt-row key="1" title="test 1">
<div> nothing of this and beyond is shown</div>
<gantt-row key="2" title="test 2">
<gantt-row key="3" title="test 3">
<script type="text/javascript"></script>
</gantt-row>
</gantt-row>
</gantt-row>
If you prefer to continue using in-DOM templates, use a normal closing tag for Vue components:
<gantt-chart>
<div> this is visible </div> ๐
<gantt-row key="1" title="test 1"></gantt-row>
<div> everything below is also shown now </div>
๐
<gantt-row key="2" title="test 2"></gantt-row>
๐
<gantt-row key="3" title="test 3"></gantt-row>
</gantt-chart>