开发者问题收集

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