Nuxt/Vuetify - v-autocomplete 不显示 v-menu

Question

Edit2：我找到了这个问题的答案，如果你刚刚开始使用 vuetify，或者你只是直接深入研究它并将其集成到现有项目中而不阅读其 [，你也可能会错过这个问题 documentation 像我一样。如果 Vuetify 不在应用程序标签或 <v-app> 标签内，它将无法工作。因此，如果您使用的是布局，请确保将代码包装在 v-app 标记内，样式可能适用，但如果您不使用应用程序标记进行包装，则功能将无法使用。

原题：

我似乎无法让 v-autocomplete 在我的任何项目中工作，我在 2 个不同的项目中尝试过，一个使用 npm 安装，另一个安装使用 nuxt-create。我什至从他们网站上的演示中复制了代码，但这也不起作用。这些是每个项目的包版本：

"dependencies": {
  "@nuxtjs/axios": "^5.13.6",
  "core-js": "^3.15.1",
  "nuxt": "^2.15.7",
  "vuetify": "^2.5.5"
},

和

"devDependencies": {
  "@nuxtjs/vuetify": "^1.12.1",
  "@vue/test-utils": "^1.0.0-beta.27",
  "babel-jest": "^24.1.0",
  "jest": "^24.1.0",
  "nodemon": "^1.18.9",
  "vue-jest": "^4.0.0-0"
}

当我检查元素时，我可以在数组中看到 v-menu 和列表，但它的默认样式为 display: none;，因此，即使我单击或开始输入，假设的自动完成数组不会显示。

所以我的问题是，如何让它像在他们网站上的演示中那样工作？

Edit1：我发现了一个小问题，它现在可以工作了，但只适用于默认布局的页面。因此，当我在 /device 页面上设置自定义布局时，比如这个 layout: 'sidebar-layout',，v-autocomplete 的下拉列表将永远不会打开，除非我设置 div class v-menu 在我的浏览器中使用元素检查器。我还没有找出是什么原因造成的，可能是在布局中，也可能是在布局中调用的组件。

Answer 1

您可能忘记添加 script 部分？

示例中的以下代码in the docs，完全适合我

<template>
  <v-card>
    <v-container fluid>
      <v-row
        align="center"
      >
        <v-col cols="12">
          <v-autocomplete
            v-model="values"
            :items="items"
            outlined
            dense
            chips
            small-chips
            label="Outlined"
            multiple
          ></v-autocomplete>
        </v-col>
        <v-col cols="12">
          <v-autocomplete
            v-model="values"
            :items="items"
            dense
            chips
            small-chips
            label="Solo"
            multiple
            solo
          ></v-autocomplete>
        </v-col>
        <v-col cols="12">
          <v-autocomplete
            v-model="value"
            :items="items"
            dense
            filled
            label="Filled"
          ></v-autocomplete>
        </v-col>
      </v-row>
    </v-container>
  </v-card>
</template>


<script>
  export default {
    data: () => ({
      items: ['foo', 'bar', 'fizz', 'buzz'],
      values: ['foo', 'bar'],
      value: null,
    }),
  }
</script>

如果您需要确认，这里是工作 github link。
yarn && yarn dev 一切正常。

Answer 2

我不知道这是否愚蠢，但解决这个问题的方法是确保 layout.vue 文件中的代码包含在 <v-app> 标记中。

这是导致问题的布局：

<template>
 <div class="main__container">
   <div class="sidebar__container">
      <Sidebar />
   </div>
   <div class="main__content">
      <Nuxt />
   </div>
  </div>
</template>

在与 vuetify 的默认布局进行比较后，它的所有代码都包含在 <v-app> 标签中，（我显然错过了，因为我刚开始使用 vuetify 并立即在现有项目中使用它）。所以在用 <v-app> 包装我的布局后，它现在可以工作了：

<template>
  <v-app>
    <div class="main__container">
      <div class="sidebar__container">
        <Sidebar />
      </div>
      <div class="main__content">
        <Nuxt />
      </div>
    </div>
  </v-app>
</template>

感谢您的回答。

Nuxt/Vuetify - v-autocomplete 不显示 v-menu

Nuxt/Vuetify - v-autocomplete not displaying the v-menu

vue.js

nuxt.js

vuetify.js

v-autocomplete