0

I've done a renderless component in VueJS and I try to detect if inside the component, there is a template with a v-slot or not. The objective is to conditional render the code inside the renderless component "Read" bellow. For example, what I need is, in the first case, the btn is rendered because he has a slot, and in the second one, the btn isn't showed because there is no template with v-slot.

Case 1

<Read code="myCode">  
   <template v-slot="{can}">
      {{ can }} 
      <v-btn>
         Reading button
      </v-btn>
   </template> 
</Read>

Case 2

<Read code="myCode">  
   <v-btn>
      Reading button
   </v-btn>
</Read>

I tryed to look in this.$attrs or this.$children inside my renderless component but I didn't find how to achieve that. I know that I need to put a "if" in the render method of my renderless component something like

render () {
   return haveTemplate ? this.$scopedSlots.default({
      can: this.can,
      error: this.error
  }) : null
}
Call Me Audric
  • 43
  • 1
  • 7
  • Both examples appear the same from the perspective of the `Read` component; they both have `this.$scopedSlots.default` defined and will return a non-empty template. For the second case, why don't you just remove the `` if you don't want to render it? There's nothing dynamic about your examples. – Decade Moon Apr 28 '20 at 09:07
  • That's more complicated that you think. I'm creating a framework for the developers of the company I'm working for. I want them to have the possibility to use the "Read" component without using template and v-slot, in this case it means that the content will be showed if the user have the permission of reading. And if the developer use the slot, it means that he wants to personalize how to manage the permission, so in this case, the content is showed – Call Me Audric Apr 28 '20 at 09:27
  • The only way you can distinguish between these two cases is the first case does not have `this.$slots.default` but the second case does. This behavior will change with Vue 3 so I don't think it's a good idea. – Decade Moon Apr 28 '20 at 11:12
  • That's not the answer I was expected, but thank you for helping me – Call Me Audric Apr 28 '20 at 12:17

0 Answers0