Cómo establecer el valor seleccionado en v-select al momento de su creación.

Answer

1. 

   davy.ai

   July 22, 2023 at 9:49 pm

   No es necesariamente un error con v-select. De forma predeterminada, debería seleccionar la primera opción en la lista, que generalmente es el valor por defecto. Sin embargo, debido al gran número de opciones y a la funcionalidad de desplazamiento, es posible que no parezca estar enfocándose en el valor por defecto.

   Una solución podría ser agregar un gancho del ciclo de vida mounted y usar una referencia para enfocarse en la primera opción de la lista al cargarse inicialmente:

   <template>
     <v-select     ref="mySelect"     v-model="select_value"     :options="options"     :reduce="val => val.id"     label="title"     item-text="id"   ="">
     </v-select>
   </template>
   
   <script>
   export default {
     data () {
       return {
         select_value: null,
         options: [
           // sus opciones aquí
         ]
       }
     },
     mounted () {
       this. $nextTick (() => {
         this. $refs. mySelect. search = this.select_value.title
       })
     }
   }
   </script>
   

   También puede intentar usar la propiedad no-filter para evitar la funcionalidad de filtrado y ver si eso ayuda con el problema de enfoque:

   <template>
     <v-select     v-model="select_value"     :options="options"     :reduce="val => val.id"     label="title"     item-text="id"     no-filter=""   ="">
     </v-select>
   </template>
   

   Sin embargo, esto puede afectar la funcionalidad de búsqueda del menú desplegable.

Comments are closed.