Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/vuejs/vue/issues/4779 below:

Scoped slot does not work with dynamic slot name · Issue #4779 · vuejs/vue · GitHub

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

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

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.

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

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4