v-menu 的 Vuetify 问题
Posted
技术标签:
【中文标题】v-menu 的 Vuetify 问题【英文标题】：Vuetify issue with v-menu 【发布时间】：2019-01-06 21:01:41 【问题描述】：Vuetify 1.1.8 / Vue 2.5.16
我不明白为什么会出现两种不同的行为：
1- 在 Codepen.io 中测试
html
<div id="app">
<v-app id="inspire">
<div class="text-xs-center">
<v-menu offset-y>
<v-btn
slot="activator"
color="primary"
dark
>
<span v-if="this.locale === 'en'">English</span>
<span v-if="this.locale === 'fr'">Français</span>
<span v-if="this.locale === 'br'">Português</span>
</v-btn>
<v-list>
<v-list-tile
v-for="(locale, index) in locales"
:key="index"
@click="switchLocale(index)"
>
<v-list-tile-title> locale.title </v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
</div>
</v-app>
</div>
js
new Vue(
el: '#app',
data: () => (
locale: 'en',
locales: [
locale: 'en', title: 'English', icon: '@/assets/images/flag_gb_24.png' ,
locale: 'fr', title: 'Français', icon: '@/assets/images/flag_fr_24.png' ,
locale: 'br', title: 'Português', icon: '@/assets/images/flag_br_24.png'
]
),
methods:
switchLocale: function (index)
console.log('switch locale: ', this.locales[index].title)
this.locale = this.locales[index].locale
)
运行良好...
但是一旦我将它插入到我的应用程序中的 Vue.js 组件中，我就会收到一个错误：
控制台
vuetify.js?ce5b:19387 [Vuetify] Unable to locate target [data-app]
found in
---> <VMenu>
<VToolbar>
<Toolbar>
<App> at src/App.vue
<Root>
consoleWarn @ vuetify.js?ce5b:19387
initDetach @ vuetify.js?ce5b:16782
mounted @ vuetify.js?ce5b:16742
callHook @ vue.runtime.esm.js?2b0e:2917
insert @ vue.runtime.esm.js?2b0e:4154
invokeInsertHook @ vue.runtime.esm.js?2b0e:5956
patch @ vue.runtime.esm.js?2b0e:6175
Vue._update @ vue.runtime.esm.js?2b0e:2666
updateComponent @ vue.runtime.esm.js?2b0e:2784
get @ vue.runtime.esm.js?2b0e:3138
run @ vue.runtime.esm.js?2b0e:3215
flushSchedulerQueue @ vue.runtime.esm.js?2b0e:2977
(anonymous) @ vue.runtime.esm.js?2b0e:1833
flushCallbacks @ vue.runtime.esm.js?2b0e:1754
Promise.then (async)
microTimerFunc @ vue.runtime.esm.js?2b0e:1802
nextTick @ vue.runtime.esm.js?2b0e:1846
queueWatcher @ vue.runtime.esm.js?2b0e:3064
update @ vue.runtime.esm.js?2b0e:3205
Vue.$forceUpdate @ vue.runtime.esm.js?2b0e:2687
(anonymous) @ index.js?6435:233
(anonymous) @ index.js?6435:231
(anonymous) @ index.js?6435:116
(anonymous) @ Toolbar.vue?be73:29
./src/components/Shared/Toolbar.vue @ app.js:2759
__webpack_require__ @ app.js:768
hotApply @ app.js:687
(anonymous) @ app.js:344
Promise.then (async)
hotUpdateDownloaded @ app.js:343
hotAddUpdateChunk @ app.js:319
webpackHotUpdateCallback @ app.js:37
(anonymous) @ app.a888e56db407050b2768.hot-update.js:1
Toolbar.vue?9799:67 TOOLBAR mounted locale: en
Toolbar.vue
<template>
<v-toolbar fixed>
<v-toolbar-title>
<img src="@/assets/images/app_logo.png" >
<v-menu offset-y>
<v-btn
slot="activator"
color="primary"
dark
>
<span v-if="this.locale === 'en'">English</span>
<span v-if="this.locale === 'fr'">Français</span>
<span v-if="this.locale === 'br'">Português</span>
</v-btn>
<v-list>
<v-list-tile
v-for="(locale, index) in locales"
:key="index"
@click="switchLocale(index)"
>
<v-list-tile-title> locale.title </v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items>
....
</v-toolbar-items>
</v-toolbar>
</template>
<script>
export default
name: 'Toolbar',
props: ['appName'],
data ()
return
menuItems:
home: icon: 'home', title: 'Home', link: '/' ,
about: icon: 'info', title: 'About', link: '/about'
,
locale: 'en',
locales: [
locale: 'en', title: 'English', icon: '@/assets/images/flag_gb_24.png' ,
locale: 'fr', title: 'Français', icon: '@/assets/images/flag_fr_24.png' ,
locale: 'br', title: 'Português', icon: '@/assets/images/flag_br_24.png'
]
,
methods:
switchLocale: function (index)
console.log('switch locale: ', this.locales[index].title)
this.locale = this.locales[index].locale
,
mounted ()
console.log('TOOLBAR mounted locale: ', this.locale)
</script>
【问题讨论】：
【参考方案1】：我们可以手动将data-app 属性添加到我们的根组件，而无需使用<v-app></v-app> 包装整个组件。它将如下所示：
<template>
<div id="app" data-app>
....
</div>
</template>
【讨论】：
【参考方案2】： <v-app> <-- you missing <v-app> wrapping because is rule ....
<router-view/>
</v-app>
贤基
【讨论】：
虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高答案的长期价值【参考方案3】：据我了解，在 vuetify 中，您需要将应用程序包装在 <v-app></v-app> 中。这发生在App.vue 或您在main.js 中设置为根组件的任何内容中。 v-app 组件设置了这个data-app 属性。
文档是这样说的：
Vuetify 需要使用 v-app 组件。它应该包装您的整个应用程序，并且是包括主题在内的许多框架功能的中心点。确保您遵循应用程序页面中记录的正确标记。
来源：FAQ: My application does not look correct，检索于 2019 年 10 月 2 日
【讨论】：
是的！非常感谢...忘记了...我正在根据自己的项目设置一个演示项目，所以我从头开始重置所有代码（复制/粘贴代码片段..忘记初始化 v-app .... 有时这还不够（不知道为什么），即使在正文下方添加：vue create ... 和 vue add vuetify) 时它按预期工作（没有“data-app”）data-app 的 webpack 插件的奇怪组合。还要确保 v-app 由 vuetify 注册，而不是您可能包含的其他库，甚至不是您自己制作的组件。
嗨@Samurai8！感谢您的回复。我使用“vuetify”：“^2.0.0”，“vuetify-loader”：“^1.2.2”，除 vuetify 外，在代码中的任何地方都找不到“data-app”
嗯，这看起来很新。如果没有重现它的方法，我认为我无法提供太多帮助。我建议创建一个 minimal reproducible example 并提出一个专门的问题，如果创建 mcve 还没有让您清楚实际发生了什么。【参考方案4】：
解决了
需要在父包装组件中添加data-app属性
<template>
<v-toolbar fixed>
<v-toolbar-title data-app>
【讨论】：
为什么需要这样做？以上是关于v-menu 的 Vuetify 问题的主要内容，如果未能解决你的问题，请参考以下文章
如何将 Vuetify v-menu 附加到可滚动列表中的父元素？
Vuetify - 将v-menu添加到v-card更改v-card宽度