<v-select v-model="selectedRole" :items="roles" item-text="role" label="Select Role" multiple > <template v-slot:prepend-item> <v-list-item ripple @mousedown.prevent @click="toggle" > <v-list-item-action> <v-icon :color="selectedRole.length > 0 ? 'indigo darken-4' : ''"> {{ icon }} </v-icon> </v-list-item-action> <v-list-item-content> <v-list-item-title> Select All </v-list-item-title> </v-list-item-content> </v-list-item> <v-divider class="mt-2"></v-divider> </template> </v-select> computed: { icon () { if (this.selectAllRole) return 'mdi-close-box' if (this.selectSomeRole) return 'mdi-minus-box' return 'mdi-checkbox-blank-outline' }, selectAllRole () { console.log('this.userObj', this.userObj) console.log('this.roles.length', this.roles.length) console.log('this.selectedRole.length', this.selectedRole.length) return this.selectedRole.length === this.role.length }, selectSomeRegion () { return this.selectedRole.length > 0 && !this.selectAllRole } } methods: { toggle () { this.$nextTick(() => { if (this.selectAllRole) { this.selectedRole.roleId = [] } else { this.selectedRole = this.role.slice() } }) }'" }

Estoy usando v-select junto con seleccionar todas las funciones.

Cuando selecciono "Seleccionar todo", debería seleccionar todas las opciones en el menú desplegable.

Me está dando un error diciendo Error in render: "TypeError: Cannot read properties of undefined (reading 'length')"

Por favor ayúdame a resolver esto.