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-container与v-app标签一起包装，您的选择将正确显示。有关v-app here的更多信息。

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

Answer 2

类似的假象可能是由相对位置的父项引起的，我想出了部分解决方法，只是还不知道如何整合它。

这是该问题的github错误报告 https://github.com/vuetifyjs/vuetify/issues/9933