Я не могу получить пример кода V-меню Vuetify для работы внутри моего приложения PWA, но он нормально работает в скрипте (например, https://jsfiddle.net/tjw13yz4/27/)
Проблема заключается в следующем: содержимое слота активаторане появляется.
При отладке исходного кода vuetify я обнаружил, что шаблон активатора обнаруживается в слоте «по умолчанию» (где весь скрытый контент), а не в названном слоте активатора (гдевидимая область кнопки / щелчка должна быть).
Я упростил свое приложение до чистых (изначально у меня были динамические компоненты, формы, API и т. д.), поэтому я сократил его до просто v-менювнутри элемента v-app верхнего уровня и удалили все маршрутизаторы, хранилища и другие плагины. Это настолько просто, насколько я могу получить, но все еще не работает. Единственная разница, оставшаяся между скрипкой и моим локальным приложением, заключается вbuild system.
Я также пытался изменить / удалить реквизиты слота и привязку on к кнопке, которая изменяет внутреннее представление именованного слота.буду в Vuetify (или Vue).Однако ни одна версия с или без реквизита не связывает именованный слот должным образом.
Я также обновляю и перестраиваю npm (рекомендуется в другом SO), поэтому я использую последние версии Vue 2.6.10 и Vuetify 1.5.14.
Я также гарантировал, что я обертываю в <v-app></v-app> (но это произошло, когда я установил плагин Vuetify), как отмечено в других SO.
Я также прочитал это SO который я нашел полезным при отладке.
Я пытался поместить slot=activator непосредственно в тег HTML, а не использовать шаблон.
И я, вероятно, пробовал еще дюжину других вещей (изначальноУ меня просто была проблема с on, потому что v-on не был определен, но это было из-за этой основной проблемы).
Это мои упрощенные файлы - все это довольно стандартно:
App.vue (с / без реквизитов для привязки по событию)
<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
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import 'vuetify/src/stylus/app.styl'
Vue.use(Vuetify, {
iconfont: 'md',
})
index.html
Когда он запускается, я устанавливаю точку останова в node_modules/vuetify/src/components/VMenu/mixins/menu-generators.js и она возвращает ноль здесьпотому что ни один тип слотов не установлен:
genActivator: function genActivator() {
if (!this.$slots.activator && !this.$scopedSlots.activator) return null;
В моем приложении инспектор отладки Chrome показывает, что v-btn находится рядом с тегом p под default $slot, но он должен быть под своим.
В рабочем Fiddle , напротив, при отладке жеВ функции я вижу узел activator в $scopeSlots, когда я включаю привязку события v-on = on, и в $slots, если нет.И все работает нормально.
Почему оператор v-slot=activator может не вступить в силу?