相关疑难解决方法(0)

v-slot:activator =“ {}的含义”

查看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 }">,但是如果将其删除,则会呈现页面。

vue.js vuejs2 vuetify.js

28
推荐指数
4
解决办法
1万
查看次数

Vuetify菜单不起作用:属性或方法“ 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)

menu vuetify.js

6
推荐指数
1
解决办法
1367
查看次数

v-tooltip 不显示其背后的组件

我正在尝试按照他们文档中的示例实现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)

vue.js vuetify.js

4
推荐指数
1
解决办法
1350
查看次数

标签 统计

vuetify.js ×3

vue.js ×2

menu ×1

vuejs2 ×1