查看Vuetify示例代码v-toolbar的目的是v-slot:activator="{ on }"什么?例如:
<template v-slot:activator="{ on }">
<v-toolbar-title v-on="on">
<span>All</span>
<v-icon dark>arrow_drop_down</v-icon>
</v-toolbar-title>
</template>
<script>
export default {
data: () => ({
items: [
'All', 'Family', 'Friends', 'Coworkers'
]
})
}
</script>
Run Code Online (Sandbox Code Playgroud)
据我所知,on它在任何地方都不是定义的变量,因此我看不到它是如何工作的。当我在项目中尝试使用Internet Explorer时,Internet Explorer会引发错误<template v-slot:activator="{ on }">,但是如果将其删除,则会呈现页面。
我正在从官方文档Vuetify复制有关菜单的第一个示例,但结果是一个错误:
“属性或方法“ on”未在实例上定义,但在渲染期间被引用”。
<template>
<v-app>
<div class="text-xs-center">
<v-menu offset-y>
<template v-slot:activator="{ on }">
<v-btn
color="primary"
dark
v-on="on"
>
Dropdown
</v-btn>
</template>
<v-list>
<v-list-tile
v-for="(item, index) in items"
:key="index"
@click=""
>
<v-list-tile-title>{{ item.title }}</v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
</div>
</v-app>
</template>
<script>
export default {
data: () => ({
items: [
{ title: 'Click Me' },
{ title: 'Click Me' },
{ title: 'Click Me' },
{ title: 'Click Me 2' }
]
})
}
</script>Run Code Online (Sandbox Code Playgroud)
我正在尝试按照他们文档中的示例实现v-tooltip,但我无法使其工作。如果我复制该示例,则会收到此错误:
[Vue warn]: Property or method "on" 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.
如果我声明财产,on则 btn 根本不会出现。
这是模板:
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn color="primary" dark v-on="on">Bottom</v-btn>
</template>
<span>Bottom tooltip</span>
</v-tooltip>
Run Code Online (Sandbox Code Playgroud)