Css v-select下拉列表显示在v-dialog外部

我使用的是vuetify 2.3.10。我有下面一段代码，我在这里面临的问题是，v-select的select下拉列表出现在页面顶部，而不是出现在附加到v-select的对话框中。我猜下拉列表的positionCSS属性有一些问题。我如何解决这个问题

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

选择位置
好啊

卸下

附件=“#在
上更改位置对话框

，应该可以。我猜发生的是，它试图在对话框上附加选择菜单，包括覆盖整个页面的背景，使其显示在顶部。通过删除

attach

属性，默认情况下，它将附加到

文本字段

这里有一个：