vuetify 的 v-tooltip 破坏了整个页面

Question

I'm using this example from vuetify documentation

<v-tooltip bottom>
    <template #activator="data">
        <v-btn color="primary" dark v-on="data.on">Button</v-btn>
    </template>
    <span>Tooltip</span>
</v-tooltip>

but when I put it anywhere my whole page breaks, do not render after that and I got JS error:

[Vue warn]: Property or method "data" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties . found in ---> at resources/assets/js/components/Project.vue

I'm not sure why, as in the other project it works fine. Any ideas?

Answer 1

From Vuetify => activator: When used, will activate the component when clicked (or hover for specific components). This manually stops the event propagation. Without this slot, if you open the component through its model, you will need to manually stop the event propagation

"data" can be any string here. As long as it matches v-on="data.on" Are you using data property on your page? can you show what you have on your script section?