Vuetify Unable to locate target when using attach on v-autocomplete

Question

I want to use autocomplete from Vuetify and I am facing issues there because on my website I have one of the outer divs position: relative the dropdown part of the autocompelete, which is position: absolute, is attaching itself not to the bottom of the input but in random place.

Autocomplete has a prop attach which Specifies which DOM element that this component should detach to. Use either a CSS selector string or an object reference to the element. so I thought I use that and set it to class of my input.

And this works but it causes warning in the console

[Vuetify] Unable to locate target v-autocomplete

found in

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

Here the link where I reproduced the console warning.

Answer 1

If you are not using v-app component in App.vue, make sure to add data-app attribute to the div with the id app in App.vue.

The result will be like the following:

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