<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()
        }
      })
    }'"
}

I am using v-select along with select all functionality.

When I select "Select All" it should select all the option in the drop down.

It is giving me error saying Error in render: "TypeError: Cannot read properties of undefined (reading 'length')"

Please, help me to resolve this.