我似乎無法獲得Vuetify v菜單在我的PWA應(yīng)用程序中運行的示例代碼,但它在Fiddle中正常工作(例如https://jsfiddle.net/tjw13yz4/27/)問題是:激活器插槽內(nèi)容沒有出現(xiàn)。通過調(diào)試vuetify源代碼,我發(fā)現(xiàn)激活器模板在“默認”插槽(所有隱藏內(nèi)容所在的位置)下出現(xiàn),而不是在命名的激活器插槽(可見的按鈕/單擊區(qū)域應(yīng)在該位置)下出現(xiàn)。我已經(jīng)簡化了我的應(yīng)用程序的工作(最初我擁有動態(tài)組件,表單,API等),因此我將其簡化為頂層v-app元素內(nèi)的一個v-menu,并刪除了所有路由器,商店和其他插件。這很簡單,但是仍然行不通。小提琴和本地應(yīng)用程序之間唯一的區(qū)別是構(gòu)建系統(tǒng)。我還嘗試過更改/刪除插槽屬性以及對on按鈕的綁定,這確實修改了命名插槽在Vuetify(或Vue)內(nèi)部的表示方式。但是,帶有或不帶有道具的版本都無法正確綁定命名槽。我還對npm進行了更新和重建(在另一個SO中建議),所以我使用的是最新的Vue 2.6.10和Vuetify 1.5.14。我還確保<v-app></v-app>按照其他SO中的說明進行包裝(但是這是在安裝Vuetify插件時發(fā)生的)。我還讀了這篇SO,對調(diào)試很有用。我試過slot=activator直接放在HTML標(biāo)記上,而不是使用模板。我可能還嘗試了許多其他方法(最初我只是on因為未定義for v-on而遇到問題,但這是由于此潛在問題所致)。這些是我的簡化文件-全部都是標(biāo)準(zhǔn)文件: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.jsimport Vue from "vue";import "./plugins/vuetify";import App from "./App.vue";new Vue({ render: h => h(App)}).$mount("#app");插件/vuetify.jsimport Vue from 'vue'import Vuetify from 'vuetify/lib'import 'vuetify/src/stylus/app.styl'Vue.use(Vuetify, { iconfont: 'md',})index.html當(dāng)它運行時,我在其中設(shè)置了一個斷點,node_modules/vuetify/src/components/VMenu/mixins/menu-generators.js并在此處返回null,因為沒有設(shè)置任何插槽類型: genActivator: function genActivator() { if (!this.$slots.activator && !this.$scopedSlots.activator) return null;在我的應(yīng)用中,Chrome調(diào)試檢查器在下方的標(biāo)簽v-btn旁邊顯示,但該p標(biāo)簽default $slot應(yīng)位于其自己的標(biāo)簽下。相比之下,在工作中的Fiddle中,調(diào)試相同的功能時,我看到了包含v-on = on事件綁定時的activator節(jié)點,$scopeSlots如果沒有包含該節(jié)點,則看到該節(jié)點$slots。而且效果很好。為什么該v-slot=activator聲明不生效?
名為插槽“激活器”的Vue JS Vuetify菜單未綁定至模板,而是變?yōu)?ldquo;默認”
www說
2021-05-13 14:15:35