javascriptvue.jsvuetify.jsactivator

Why does this activator text disappear when treating slot as scoped slot?


Vuetify's v-list-group activator text disappears when treating it as a scoped slot using the new Vue syntax (<template v-slot:activator> vs <template v-slot:activator="{on}">).

I forked the Vuetify example Codepen and stripped it down for simplicity. I have it set up so that I can easily comment the activator to use scoped slots or not. The activator text definitely shows when using just v-slot:activator.

Here is my Codepen link: https://codepen.io/Made-of-Clay/pen/rNBzeaQ&editors=101

The original pen that I forked from: https://codepen.io/pen/?&editable=true&editors=101 )

The docs page where I found the pen: https://vuetifyjs.com/en/components/lists#expansion-lists

I don't notice errors or warnings. I expect the activator text to show up when using v-slot:activator="{on}" and v-on="on" as the docs indicate.


Solution

  • Putting ="{on}" on the end will change the slot usage from a normal slot to a scoped slot. I'm not sure why you think the activator slot for v-list-group can be used as a scoped slot, nothing I've found in the documentation suggests that it supports this.

    If we take a look at the code for v-list-group we see this:

    https://github.com/vuetifyjs/vuetify/blob/db84347f242fe73288b72c7e72a1af04b09c9434/packages/vuetify/src/components/VList/VListGroup.ts#L157

    activator is being accessed as a normal slot, via this.$slots.activator. This will only work if you use a normal slot.

    Contrast that with other components, such as v-menu. The v-menu component also has an activator slot but it supports using it as either a normal slot or a scoped slot.

    https://github.com/vuetifyjs/vuetify/blob/db84347f242fe73288b72c7e72a1af04b09c9434/packages/vuetify/src/components/VMenu/VMenu.ts#L435

    Note how this explicitly references both this.$slots.activator and this.$scopedSlots.activator. In this case the actual inclusion of this slot happens in the activatable mixin:

    https://github.com/vuetifyjs/vuetify/blob/db84347f242fe73288b72c7e72a1af04b09c9434/packages/vuetify/src/mixins/activatable/index.ts#L82

    You'll notice that this does support an on value being passed to the scoped slot. There's a helper being used here called getSlot that smoothes over the differences between normal and scoped slots:

    https://github.com/vuetifyjs/vuetify/blob/db84347f242fe73288b72c7e72a1af04b09c9434/packages/vuetify/src/util/helpers.ts#L477

    None of this applies to v-list-group, which just supports a normal slot.