渲染中的 Vue.js 错误：“TypeError：无法读取未定义的属性‘长度’”

Posted 2023-02-22

【中文标题】渲染中的 Vue.js 错误：“TypeError：无法读取未定义的属性‘长度’”

【英文标题】：Vue.js Error in render: "TypeError: Cannot read property 'length' of undefined"

【发布时间】：2021-10-25 02:27:33

【问题描述】：

我有一个 vuejs 组件，它给我带来了一个选择框。第一步我可以选择代理 ou 组，但要查看第二个选择，我需要先选择代理或组。因此，当用户不选择第一个选择选项时，我想隐藏第二个选择，但在我的计算属性中，错误是：渲染错误：“TypeError：无法读取未定义的属性'长度' "

我的模板：

  <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 = []
        
      
    ,

【问题讨论】：

如果错误出现在计算属性中，可以试试：return this.atributionType && this.atributionType.length < 0

你如何定义atributionType？

@BoussadjraBrahim 我用代码更新了问题

@Alessandro 在第一次尝试中工作，但是当watch 清理变量时，计算的属性不会改变

【参考方案1】：

尝试将空数组分配给属性类型

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: []