Vuetify 在 v-autocomplete 上使用附加时无法定位目标

Question

我想使用Vuetify 的自动完成功能，但我在那里遇到了问题，因为在我的网站上，我有一个外部 divposition: relative的下拉部分，即autocompelete，它position: absolute不是将自己附加到 底部input而是随机位置。

自动完成有一个道具attach，Specifies which DOM element that this component should detach to. Use either a CSS selector string or an object reference to the element.所以我想我使用它并将其设置为我的输入类。

这有效，但它会在控制台中引起警告

[Vuetify] Unable to locate target v-autocomplete

found in

---> <VMenu>
       <VAutocomplete>
         <VCard>
           <VApp>
             <Root>

这是我复制控制台警告的链接。

Answer 1

如果您没有v-app在 App.vue 中使用组件，请确保在 App.vue 中为 id添加data-app属性。divapp

结果将如下所示：

<template>
    <div id="app" data-app>
        ....  All components, routers, views  here ...
    </div>
</template>

Answer 2

这对我有用：

\n\n

<div id="app">\n  <v-app id="inspire">\n    <v-card>\n      <v-card-title class="headline font-weight-regular blue-grey white--text">Profile</v-card-title>\n      <v-card-text>\n        <v-subheader class="pa-0">Where do you live?</v-subheader>\n        <v-autocomplete\n          v-model="model"\n          :hint="!isEditing ? \'Click the icon to edit\' : \'Click the icon to save\'"\n          :items="states"\n          :readonly="!isEditing"\n          :label="`State \xe2\x80\x94 ${isEditing ? \'Editable\' : \'Readonly\'}`"\n          persistent-hint\n          prepend-icon="mdi-city"\n          :attach="\'#attach\'"\n        >\n          <template v-slot:append-outer>\n            <div id="attach"></div>\n            <v-slide-x-reverse-transition\n              mode="out-in"\n            >\n              <v-icon\n                :key="`icon-${isEditing}`"\n                :color="isEditing ? \'success\' : \'info\'"\n                @click="isEditing = !isEditing"\n                v-text="isEditing ? \'mdi-check-outline\' : \'mdi-circle-edit-outline\'"\n              ></v-icon>\n            </v-slide-x-reverse-transition>\n          </template>\n        </v-autocomplete>\n      </v-card-text>\n    </v-card>\n  </v-app>\n</div>\n

\n