Vuetify, tooltips: what are "on" and "attrs" for?

user_1704895 0
Viewed 5797

I looked for "Tooltip" in the Vuetify documentation, and I found this example:

<v-tooltip left>
  <template v-slot:activator="{ on, attrs }">
    <v-btn
      color="primary"
      dark
      v-bind="attrs"
      v-on="on"
    >Left</v-btn>
  </template>
  <span>Left tooltip</span>
</v-tooltip>

What are on and attrs for? And why are they mandatory?

Also, is this the correct way to listen for the click event?

<v-tooltip bottom>
  <template v-slot:activator="{ on }">
    <v-btn v-on="{...on, click: onToggle }" icon>
      <v-icon>mdi-eye</v-icon>
    </v-btn>
  </template>
  Show password
</v-tooltip>
vuetify.js vue.js tooltip
2 Answers

I could explain myself what that means, but I consider that this video explains it a lot better I let you the time where it stars explaining the utility of v-on and attrs

Just take a look to the section Transparent wrappers

https://youtu.be/7lpemgMhi0k?t=1314

Summary

v-on: Binds a series of listener functions

More in: https://v2.vuejs.org/v2/api/#v-on

$attrs: Stores the attributes setted in the parent component, you can reuse them in a inner component

More in: https://v2.vuejs.org/v2/api/#inheritAttrs

You can find other usages besides of what is shown in the video, but transparent wrappers are a common use case.

user_60321550

So far I understand the v-on events of the parent (the v-tooltip component) are events of the child (the v-btn component) by doing v-on="on".

For a conditional 'inheritance' of the v-on events, you can do for example

<!-- displayTootip is true/false -->
<v-btn
  v-bind="attrs"
  v-on="displayTootip ? on : null"
>Left</v-btn>

For second part of the question, the documentation provide an example to display the toogle programmatically using v-model.

user_94285380
Related