vue.js - v-menu 的 Vuetify 问题
问题描述
Vuetify 1.1.8 / Vue 2.5.16
我不明白为什么我会得到 2 种不同的行为:
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
工具栏.vue
<template>
<v-toolbar height="80px" fixed>
<v-toolbar-title>
<img src="@/assets/images/app_logo.png" alt="">
<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>
解决方案
据我了解,在 vuetify 中,您需要将应用程序包装在<v-app></v-app>
. 这发生在App.vue
或您在main.js
作为根组件中设置的任何内容中。v-app 组件设置此data-app
属性。
文档对此进行了说明:
Vuetify 需要使用 v-app 组件。它应该包装您的整个应用程序,并且是包括主题在内的许多框架功能的中心点。确保您遵循应用程序页面中记录的正确标记。
来源:FAQ:我的申请看起来不正确,检索于 2019 年 10 月 2 日
推荐阅读
- python - 无法确定程序提前终止的原因
- r - how to match two column of one data frame with one column of other data frame
- python - Updating MYSQL from daily CSV file - Skip already imported
- laravel - What would be an API end point to retrieve all customer's review of a product and all reviews of a specific customer
- reflection - Kotlin reflection change instance and all members that use the instance
- qt - 如何修改 QtPurchasing.jar 文件?
- c# - 如何将值从一个类传递到另一个 c# Grasshopper
- reactjs - 我的 RCTWebrtcDemo 在启用远程调试器时工作正常,但在禁用远程调试 js 时不起作用
- android - 为特定的工件发布创建 gradle 任务
- ada - 在 Ada 中混合输入呼叫和接受选择?