名为插槽“激活器"的Vue JS Vuetify菜单不会绑定到模板，而是将其设置为“默认" [英] Vue JS Vuetify menu named slot "activator" is not binding to the template, but going to "default"

问题描述

我似乎无法获得Vuetify v菜单在我的PWA应用程序中运行的示例代码，但它在Fiddle中正常工作(例如

I cannot seem to get the example code for a Vuetify v-menu to work inside my PWA app, but it works normally in a Fiddle (e.g. https://jsfiddle.net/tjw13yz4/27/)

问题是:激活器插槽内容没有出现.

The problem is: the activator slot content doesn't appear.

通过调试vuetify源代码，我发现激活器模板出现在默认"插槽(所有隐藏内容所在的位置)下，而不是在已命名的激活器插槽(可见的按钮/单击区域应位于其中)中).

By debugging the vuetify source code, I have found that the activator template turns up under the "default" slot (where all the hidden content is), not in the named activator slot (where the visible button/click area should be).

我已经简化了我的应用程序的工作(本来我具有动态组件，表单，API等)，所以我将其简化为顶层v-app元素内的一个v-menu，并删除了所有内容路由器，商店和其他插件.这很简单，但是仍然行不通.小提琴和本地应用程序之间唯一的区别就是构建系统.

I have simplified my app to the bare bones (originally I had dynamic components, forms, APIs etc) so I've reduced it down to just a v-menu inside the top-level v-app element, and removed all the routers, stores and other plugins. It's as simple as I can get it, but still doesn't work. the only difference left between the fiddle and my local app is the build system.

我还尝试过更改/移除插槽道具以及通过on绑定到按钮，这确实修改了命名插槽在Vuetify(或Vue)内部的表示方式.但是，无论有没有道具，版本都不能正确绑定命名槽.

I have also tried changing/removing the slot props and the on binding through to the button, which does modify how the named slot is internally represented in Vuetify (or Vue). However neither verison with or without props binds the named-slot properly.

我还对npm进行了更新和重建(建议在另一个SO中使用)，所以我使用的是最新的Vue 2.6.10和Vuetify 1.5.14.

I also npm updated and rebuilt (suggested in another SO), so I'm on the latest Vue 2.6.10 and Vuetify 1.5.14.

我还确保按照其他SO中的说明包装在<v-app></v-app>中(但这是在安装Vuetify插件时发生的).

I have also ensured I am wrapping in <v-app></v-app> (but that happened when I installed the Vuetify plugin) as noted in other SO's.

我还阅读了此SO ，它对调试很有用.

I also read this SO which I found useful in debugging.

我尝试将slot=activator直接放在HTML标记上，而不是使用模板.

I've tried putting slot=activator directly on HTML tag, rather than using the template.

我可能还尝试了很多其他方法((起初我只是对on遇到了问题，因为未定义v-on，但这是由于此基本问题所致).

And I probably tried a dozen other things, (initially I just had a problem with the on for v-on not being defined, but it was due to this underlying problem).

这些是我的简化文件-全部都很标准:

These are my simplified files - it's all pretty standard:

App.vue(具有/不具有用于事件绑定的道具)

App.vue (with/out props for on-event binding)

<template>
  <v-app>

    <v-menu offset-y>
      <template v-slot:activator>
        <v-btn color="primary" dark>Dropdown</v-btn>
      </template>

      <p>The menu content</p>
    </v-menu>

    <v-menu offset-y>
      <template v-slot:activator="{ on }">
        <v-btn color="primary" v-on="on" dark>Dropdown2</v-btn>
      </template>

      <p>The menu2 content</p>
    </v-menu>

  </v-app>
</template>

main.js

import Vue from "vue";
import "./plugins/vuetify";
import App from "./App.vue";
new Vue({
  render: h => h(App)
}).$mount("#app");

plugins/vuetify.js

plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import 'vuetify/src/stylus/app.styl'

Vue.use(Vuetify, {
  iconfont: 'md',
})

index.html

index.html

运行时，我在node_modules/vuetify/src/components/VMenu/mixins/menu-generators.js中设置了一个断点，并且由于未设置任何插槽类型，因此在此处返回null:

When it runs, I set a breakpoint in node_modules/vuetify/src/components/VMenu/mixins/menu-generators.js and it returns null here because neither type of slots are set:

    genActivator: function genActivator() {
        if (!this.$slots.activator && !this.$scopedSlots.activator) return null;

在我的应用中，Chrome调试检查器显示v-btn在default $slot下的p标记旁边，但是它应该在自己的标记下.

In my app, the Chrome debug inspector shows the v-btn is next to the p tag under the default $slot, but it should be under its own one.

在工作的Fiddle中，当调试相同的功能时，当我包括v-on = on事件绑定时，在$scopeSlots下的activator节点上，在$slots如果没有.而且效果很好.

In the working Fiddle by contrast, when debugging the same function, I see the activator node under $scopeSlots when I include the v-on=on event binding, and under the $slots if not. And it works fine.

为什么v-slot=activator语句不能生效?

推荐答案

阅读此答案后: https://stackoverflow.com/a/55268990/209288 我发现，较旧的(Vue v2.6之前的版本)语法在既精简的应用程序中也可以在原始组件中正常运行.

After reading this answer: https://stackoverflow.com/a/55268990/209288 I found that the older (pre Vue v2.6) syntax worked OK, both in my stripped-down app, and then also in place in my original component.

<template slot="activator" slot-scope="{ on }">

因此，即使我在执行npm更新后在Vui UI中使用了"Build"选项，我仍然意识到我的应用必须仍在运行旧版本.

Therefore I realised my app must have still been running an older version, even though I'd used the "Build" option in the Vui UI after doing the npm update.

我只是停止并重新启动了vue-cli-service serve 命令(在用户界面中)，现在一切都按预期工作了！

I just stopped and re-started the vue-cli-service serve command (in the UI) and now it all works as expected!

所以我想我仍在运行Vue v2.5.22 ，而VSCode的构建只是在热加载一些部件.

So I guess I was still running Vue v2.5.22 and the build from VSCode was just hot-reloading some parts.

因此，教训是:完成npm更新后，关闭并重新启动所有内容，包括构建服务器，VSCode调试器，chrome实例.

So the lesson is: after doing an npm update, shut down and restart everything, the build server, VSCode debugger, chrome instance.

这篇关于名为插槽“激活器"的Vue JS Vuetify菜单不会绑定到模板，而是将其设置为“默认"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！