I am working on a vuejs component that includes a select box. The first step involves selecting an agent or group, which then reveals the second select option. However, if the user fails to select an option from the first select, I want to hide the second select box. Unfortunately, I encountered an error in my computed property: Error in render: "TypeError: Cannot read property 'length' of undefined"
Here is my template:
<template>
<div :class="$style['atribution__container']">
<select
item-label="name"
:label="$t('sidebar.filter.atribution.title')"
:options="atributionTypes"
:clear="false"
:placeholder="placeholder"
:value="atributionType"
@input="handleAtributionType"
></select>
<select
v-if="isAtributionType"
append-to-body
item-label="name"
:clear="false"
:placeholder="$t('sidebar.filter.atribution.placeholder')"
:options="attributionsItens"
:value="selectedAtributionFilter"
@input="handleAtributionFilterSelection"
></select>
</div>
</template>
And here is my script (data, methods and computed property sections):
data() {
return {
atributionType: undefined,
selectedAtributionFilter: undefined,
selectedAtributionType: undefined,
isOpen: false,
atributionTypeDropDownOpen: false,
ele: []
}
},
computed: {
...mapGetters([
'temporaryFilter',
'selectedFilter',
'agents',
'agent',
'visibleGroups',
'hasBots',
'temporarySelectedFilterName',
'currentInbox'
]),
placeholder() {
return this.$te(this.temporarySelectedFilterName)
? this.$t(this.temporarySelectedFilterName)
: this.temporarySelectedFilterName
},
atributionTypes() {
const types = []
if (this.showAgentFilter) {
types.push({ name: 'Agente', type: 'agent' })
}
if (this.visibleGroups && this.visibleGroups.length) {
types.push({ name: 'Grupo', type: 'group' })
}
return types
},
isAtributionType() {
return !!this.atributionType.length < 0
}
},
watch: {
selectedAtributionIdFilter(id) {
if (!id) {
this.atributionType = []
this.selectedAtributionFilter = []
}
},
atributionType(value) {
if (!value) {
this.atributionType = []
this.selectedAtributionFilter = []
}
}
},