Question

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 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>

Answer 1

据我了解，为确保安全，您需要将应用程序包装在<v-app></v-app>中。这发生在App.vue或您在main.js中设置为根组件的任何位置。 v-app组件设置此data-app属性。

文档对此进行了说明：

为了使您的应用正常运行，您必须将其包装在   v-app组件。该组件是确定网格所必需的   布局的断点。它可以存在于体内任何地方，   但必须是 ALL Vuetify组件的父级。

来源：Application layouts on vuetifyjs.com

Answer 2

我们可以将data-app属性手动添加到我们的根组件中，而无需用<v-app></v-app>包裹整个组件。它将如下所示：

<template>
    <div id="app" data-app>
        ....
    </div>
</template>

Answer 3

已解决

需要在父包装器组件中添加data-app属性

<template>
   <v-toolbar height="80px" fixed>
      <v-toolbar-title data-app>

Answer 4

  if Mix.env == :test do
    def test_foo ...
  end

hyunki

透过v-menu检查问题

4 个答案: