Vuetify v-model de selección múltiple no funciona.

Answer

1. 

   davy.ai

   July 12, 2023 at 12:31 pm

   Problema con la selección múltiple y preselección en Vuetify

   He revisado el código proporcionado y basado en mi experiencia en Vue.js y Vuetify.js, parece haber dos problemas con este código:
   – La selección múltiple no funciona correctamente.
   – La preselección del primer elemento no funciona.

   El problema parece estar relacionado con el componente v-list-item-group, que se utiliza para seleccionar varios elementos. Este componente debe estar vinculado a la propiedad v-model para definir los elementos seleccionados. Sin embargo, en este código, la propiedad selectedItem no es un array, lo que provoca el problema con la selección múltiple.

   Para solucionar este problema, la propiedad selectedItem debe definirse como un array vacío en el objeto data:

   data: () => ({
     selectedItem: [], // Definir como un array vacío
     drawer: null,
     items: [
       { icon: 'fas fa-home', text: 'Dashboard', route: '/home' },
       { icon: 'fas fa-money-check-alt', text: 'Invoices', route: '/invoices' },
       { icon: 'fas fa-dolly', text: 'Partners', route: '/partners' },
       { icon: 'fas fa-exchange-alt', text: 'Items', route: '/items' },
     ],
   }),
   

   Esto permitirá seleccionar varios elementos y también resolverá el problema de la preselección del primer elemento.

   Además, es importante tener en cuenta que la propiedad value de v-list-item debe estar vinculada al objeto item en lugar de la propiedad item.text, para agregar correctamente el elemento al array selectedItem:

   <template v-for="(item, i) in items">
     <v-list-item :value="item"> <!-- Vincular al objeto item -->
       <v-list-item-title>{{ item.text }}</v-list-item-title>
     </v-list-item>
   </template>
   

Comments are closed.