Vuetify problème avec v-menu
Vuetify 1.1.8/Vue 2.5.16
Je ne comprends pas pourquoi j'ai 2 comportements différents:
1- test dans 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
}
}
})
fonctionne bien ...
MAIS une fois que je l’insère dans un composant Vue.js de mon application, je reçois une erreur:
console
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 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>
Autant que je sache, si vous avez bien compris, vous devez envelopper votre application dans <v-app></v-app>. Cela se produit dans App.vue ou tout ce que vous avez défini dans votre main.js en tant que composant racine. Les composants v-app définissent cet attribut data-app.
La documentation dit ceci à ce sujet:
Pour que votre application fonctionne correctement, vous devez l'envelopper dans un composant v-app. Ce composant est nécessaire pour déterminer la grille points d'arrêt pour la mise en page. Cela peut exister n'importe où dans le corps, mais doit être le parent de TOUS LES COMPOSANTS Vuetify.
Résolu
Besoin d'ajouter un attribut data-app dans le composant wrapper parent
<template>
<v-toolbar height="80px" fixed>
<v-toolbar-title data-app>