v-select 下拉菜单显示在 v-dialog 之外答案

【问题标题】：v-select dropdown shows outside the v-dialogv-select 下拉菜单显示在 v-dialog 之外
【发布时间】：2020-10-05 20:39:05
【问题描述】：

我正在使用 vuetify 2.3.10。我有以下代码，我在这里面临的问题是 v-select 的选择下拉菜单出现在页面顶部，而不是在附加到 v-select 的对话框中。我猜下拉的位置 css 属性存在一些问题。我该如何解决这个问题？

<template>
  <v-layout row wrap>
    <v-flex xs12 sm12 lg12>
      <div class='selection portal'>
        <v-dialog v-model='select_location' id="change-location-dialog" >
          <v-card>
            <v-card-text>
              <h3>Select Location</h3>
              <v-select v-model="selectedLocation"
                        persistent
                        attach="#change-location-dialog"
                        placeholder="Select Location"
                        :items='locations'
                        item-text='name'
                        item-value='id'
                        max-width="250">
              </v-select>
            </v-card-text>
            <v-card-actions>
              <v-btn @click="picklocation">Ok</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </div>
    </v-flex>
  </v-layout>
</template>

【问题讨论】：

标签： css vue.js vuetify.js

【解决方案1】：

去掉<v-select/>上的attach="#change-location-dialog应该没问题。我想会发生什么，它试图在对话框上附加选择菜单，包括覆盖整个页面的背景，因此它出现在顶部。通过删除 attach 属性，默认情况下它将附加到 <v-select/> 文本字段。

这是demo：

【讨论】：