时间戳

首页 > 解决方案 > Vuetify 下拉列表无法正常工作

vuejs2 - Vuetify 下拉列表无法正常工作

问题描述

我使用 Vuetify 示例向我的项目添加了一个下拉列表，并且发生了这种情况

该列表在我的页面底部，我猜是 CSS，但尝试找出哪个部分有点令人困惑。

代码

<v-container>
  <v-layout wrap align-center id="new">
          <v-flex xs12 sm6 d-flex>
            <v-select :items="items"
                      label="Standard"></v-select>
          </v-flex>
  </v-layout>
</v-container>

脚本

data: () => ({
  items: ['Foo', 'Bar', 'Fizz', 'Buzz'],
}),

标签： vuejs2vuetify.js

解决方案

v-app使用 Vuetify 时，您必须将您的应用程序包装在标签中才能正常运行。在这种情况下，包装v-containerwithv-app标签，您的选择将正确显示。更多关于v-app 这里。

<v-app>
  <v-navigation-drawer app></v-navigation-drawer>
  <v-toolbar app></v-toolbar>
  <v-content>
    <v-container fluid>
      <router-view></router-view>
    </v-container>
  </v-content>
  <v-footer app></v-footer>
</v-app>

推荐阅读