Estoy trabajando con v-autocomplete , que se extiende desde v-select .
Tengo una situación en la que quiero envolver esta selección dentro de un menú v.
Si intenta envolver un v-select en un v-menu con un activador v-btn , lo que esperaría es mostrar un botón primero y cuando haga clic en el botón, mostraría el autocompletado.
Vea este codepen para saber a qué me refiero: https://codepen.io/sntshk/pen/KKmjMPX?editors=1010
El problema con la implementación anterior es que, cuando hace clic en el botón, lo que ve inicialmente son elementos desplegables aplastados que se ven muy mal allí. Luego, cuando se enfoca en la selección en V haciendo clic, verá la lista desplegable de longitud completa.
Lo que estoy tratando de lograr aquí es hacer que la selección en V esté enfocada de manera predeterminada cuando hago clic en el botón. Esto renderizará el elemento de lista completamente cuando haga clic en el botón.
Entonces mi pregunta es, ¿qué debo hacer para que el v-select esté enfocado de manera predeterminada ?
puede lograr este efecto configurando autofocus prop en v-autocomplete y luego escuchar el evento de enfoque en este elemento y hacer lo siguiente:
@focus="$event.target.click"De esta manera, cuando se abre el menú, el campo de selección se enfoca y el código de evento de enfoque hace que se abra el menú desplegable.
verifique la demostración a continuación:
Vue.config.productionTip = false; new Vue({ el: '#app', vuetify: new Vuetify(), data: { flowers: ['foo', 'bar', 'baz', 'lorem', 'ipsum', 'something', 'else', 'to', 'make', 'itemlist', 'long'] } }) <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script> <div id="app"> <v-app> <v-main> <v-container> <v-menu offset-y :close-on-content-click="false"> <template v-slot:activator="{ on, attrs }"> <v-btn v-bind="attrs" v-on="on">foobar</v-btn> </template> <v-autocomplete autofocus :items="flowers" multiple label="Select an item" @focus="$event.target.click()"></v-autocomplete> </v-menu> </v-container> </v-main> </v-app> </div>