Slot stops after certain child element in Vue2

user_5572149 0
Viewed 70

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: enter image description here

http-vue-loader vuejs2 vue.js html javascript
1 Answers

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>
user_62771510
Related