Vuetify 下拉列表无法正常工作

Question

我使用 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'],
}),

Answer 1

使用 Vuetify 时，您必须将应用程序包装在标签中v-app才能正常运行。在这种情况下，将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>