Many things in Vuetify and Vuejs are hard to come to grips with, but for me, none more so that the very odd property v-on and its relationship to v-slot:activator

Two things that helped me see the light were

  • Component slots are placeholders for missing or variable content that can be added later – the activator slot’s ‘missing content’ is an event
  • v-on uses the event content to conditionally show or hide something

Tooltip example

A common usage for the activator slot and v-on is to display a tooltip.

Hovering over it will make this happen

So what does v-slot:activator=”{ on }” mean ?

The activator slot is expecting to receive props, so { on } is just extracting the on property from props, in other words props.on, where on refers to the scoped props passed to the template from the tooltip component.

Confused? Maybe this will help.

So ‘props’ is just an arbitrary name, just like you might give to a function argument. What’s important is the ‘.on’ property. Lets’ see what else is passed over as props.

displays: [ “value”, “on”, “attrs” ]

Looking a bit further into the .on property, we see that from v-tooltip, we’re receiving these properties of .on: [ “mouseenter”, “mouseleave”, “focus”, “blur”, “keydown” ]

And further, we can see that .on.mouseenter etc., are in fact functions

So from this we can deduce the the activator slot of v-tooltip will display its content depending on the characteristics of the on property. In other words, on.mouseenter makes the content visible, and on.mouseleave hides it.

Dialog example

It’s not only tooltips of course. Other components have activator slots, such as v-dialog. This snippet will bring up a dialog when the button in the activator slot is pressed. Just as with tooltip, the content is displayed or hidden depending on the state of the .on property.

This time, the only property available in the dialog .on property is .on.click, so clicking brings up the dialog. In this case we need a model to control visibility, as there is of course no ‘unclick’ event that could provoke the activator to reevaluate visibility.

Nested v-on

But, what if we wanted the button that activates the dialog to have a tooltip? Like this:

But as we’ve seen both the dialog and the button need their own activator slot, so how to organize it so that the properties are passed down ?

First of all we’ll uniquely name the .on property of each thing (destructuring allows renaming)

and for the tooltip

Next, we need to nest the tooltip and its button inside the dialog template, replacing the button that’s currently there

That will work for the tooltip, but now we’ve lost the ondialog property, so clicking the button will have no effect (remember its the ondialog property that hosted the click event). We can use ES6 spreading to combine both properties, like this

And that’s it – a button with a tooltip activating a dialog, both using the activation slot of each component.