Vue.js 渲染时出错:“TypeError:无法读取未定义的属性‘length’”
2021-08-24
2041
我有一个 vuejs 组件,它为我带来了一个选择框。第一步我可以选择代理或组,但要查看第二个选择,我需要先选择代理或组。因此,当用户不选择第一个选择选项时,我想隐藏第二个选择,但在我的计算属性中错误是: 渲染错误:“TypeError:无法读取未定义的属性‘length’”
我的模板:
<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>
脚本(数据、方法和计算属性):
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 = []
}
}
},
1个回答
尝试将空数组分配给 atributionType
data() {
return {
atributionType: [],
selectedAtributionFilter: null, // If you don't initially know the meaning,
selectedAtributionType: null, // you can assign null to the variable.
isOpen: false,
atributionTypeDropDownOpen: false,
ele: []
}
}
grovskiy
2021-08-25