Vue.js Error in render: "TypeError: Cannot read property 'length' of undefined"

Question

I have a vuejs component that bring me a select box. first step I can select the agent ou group, but to see the second select i need to select agent or group first. So when the user don't select the first select option i want to hide the second select, but in my computed property the error is : Error in render: "TypeError: Cannot read property 'length' of undefined"

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>

script (data, method and computed property):

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

If the error is in the computed property, maybe try: return this.atributionType && this.atributionType.length < 0 — Alessandro
– Alessandro, Commented Aug 24, 2021 at 22:14
@Alessandro works in the first try but when the watch clean the variables the computed property don't change — Matheus Barem
– Matheus Barem, Commented Aug 25, 2021 at 16:28

grovskiy · Accepted Answer · 2021-09-03 08:55:43Z

1

Try to assign empty array to an 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: []
  }
}

edited Sep 3, 2021 at 8:55

answered Aug 25, 2021 at 19:08

grovskiy

8086 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue.js Error in render: "TypeError: Cannot read property 'length' of undefined"

1 Answer 1

Try to assign empty array to an atributionType

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Try to assign empty array to an atributionType

Comments

Your Answer

Sign up or log in

Post as a guest

Related