Vue: Scoped slot does not work with dynamic slot name

[smolinari]

I'll admit I might be in left field with this, as it has been a learning experience, but it seems like either a bug or an enhancement. Go gently with me. 😄

You can see more discussion here as to why I've even come up to this point: https://forum.vuejs.org/t/missing-basic-understanding-between-slots-and-templates/5503/3

Steps to reproduce

If you have a double named slot situation, the scope feature works fine. i.e.:

Parent

<template class="parent">
 <child>
  <template slot="child1" scope="props1">
       <p>
         This is the child slot 1 with text passed up from the child's scope: {{ props1.firstmsg }}
       </p>
    </template>
   <template slot="child2" scope="props2">
       <p>
         This is the child slot 2 with text passed up from the child's scope: {{ props2.secondmsg }}
       </p>
    </template>
  </child>
</template>

Child

<template>
  <div>
      <slot name="child1" firstmsg="text1"></slot>
      <slot name="child2" secondmsg="text2"></slot>
  </div>

</template>

You will get:

This is the child slot 1 with text passed up from the child's scope: text1
This is the child slot 2 with text passed up from the child's scope: text2

If you also have a "dynamic" slotting going, where you'd like to control the order of certain HTML blocks and without scopes, this works fine too.

Parent

<template class="parent">
 <child>
  <template :slot="child1">
       <p>
         This is the child slot 1
       </p>
    </template>
   <template :slot="child2" scope="props2">
       <p>
         This is the child slot 2
       </p>
    </template>
  </child>
</template>
<script>
  import Child from './Child.vue'
  export default {
    data () {
      return {
        switched: true
      }
    },
    components: {
      'child': Child
    },
    computed: {
    child1 () {
      return this.switched ? 'child2' : 'child1'
    },
    child2 () {
      return this.switched ? 'child1' : 'child2'
    }
  }
}
</script>

Child

<template>
  <div>
      <slot name="child1"></slot>
      <slot name="child2"></slot>
  </div>

</template>

You will get:

This is the child slot 2
This is the child slot 1

What is Expected?

If you mix the two together. Dynamic slotting with child scopes,

Parent

<template class="parent">
 <child>
  <template :slot="child1" scope="props1">
       <p>
         This is the child slot 1 with text passed up from the child's scope: {{ props1.firstmsg }}
       </p>
    </template>
   <template :slot="child2" scope="props2">
       <p>
         This is the child slot 2 with text passed up from the child's scope: {{ props2.secondmsg }}
       </p>
    </template>
  </child>
<script>
  import Child from './Child.vue'
  export default {
    data () {
      return {
        switched: false
      }
    },
    components: {
      'child': Child
    },
    computed: {
    child1 () {
      return this.switched ? 'child2' : 'child1'
    },
    child2 () {
      return this.switched ? 'child1' : 'child2'
    }
  }
}
</script>

Child

<template>
  <div>
      <slot name="child1" firstmsg="text1"></slot>
      <slot name="child2" secondmsg="text2"></slot>
  </div>

</template>

Vue should at least render something, possibly even an error, if this isn't feasible.

What is actually happening?

Vue delivers a blank page and no errors.

Jsfiddles

Double named slots: https://jsfiddle.net/mwLbw11k/369/ <- works
Dynamic slots: https://jsfiddle.net/mwLbw11k/370/ <- works, when you change switchedto true, the slots change places.

The mix: https://jsfiddle.net/mwLbw11k/371/ <- doesn't work

Interesting that jsfiddle at least renders the results. However, the dynamic slots don't work.

Like I said, go easy with me. 😄

Scott

[LinusBorg]

Hi @smolinari

Thanks for your report, almost perfect :)

The only thing missing would be a small reproduction on jsfiddle.net or a similar service. Could you add one? Then we can look into it.

Also, in the failing example, the <child> element in the parent's template is never closed. Is that a typo here in this code example, or in your real app as well?

Thanks!

[smolinari]

Hey @LinusBorg Thorsten,

I'll see if I can put together a jsfiddle.

The missing closing </child> tag was a typo. I've corrected it above.

Scott

[smolinari]

Jsfiddles

Double named slots: https://jsfiddle.net/mwLbw11k/369/ <- works
Dynamic slots: https://jsfiddle.net/mwLbw11k/370/ <- works, when you change switchedto true, the slots change places.

The mix: https://jsfiddle.net/mwLbw11k/371/ <- doesn't work.

Interesting that jsfiddle at least renders the results. However, the dynamic slots don't work.

Scott

[smolinari]

Thanks for the quick resolution!! 👍 This kind of service is another reason why I know Vue is a great choice!

Scott