CODEWITHSUNDEEP
vue.js
nfl-x
nfl-x

Reputation: 497

Why "Error in render: TypeError: Cannot read property 'filter' of undefined" returned even data already available?

I already initialize the data.

data () {
  return {
    current_product: {},
    current_ID: '',
  }
}

Then, I fetch data from a REST API on lifecycle created hook.

created () {
  var skuID = this.$store.state.selected_productSKU.productSKU_ID

  axios.get(`http://localhost:8081/api/products/${skuID}`)
    .then(response => {
      this.current_ID = response.data.product_ID
      this.current_product = response.data
    })
    .catch(e => {
      alert(e)
  })
}

And finally, I use computed property to get some value

// THIS JUST RETURN ['XL', 'M']
focusedProduct_SKUS_NoDupSizes () {
  var newArr = this.current_product.product_SKU.filter((sku, index, self) =>
    index === self.findIndex(t => (
      t.productSKU_size === sku.productSKU_size
    ))
  )
  var x = newArr.map(a => a.productSKU_size)
  return x
}

The vue instance show expected result

Expected Result

But if i call {{ focusedProduct_SKUS_NoDupSizes }} in template.

What is happening? My first guess is the computed property using the initial structure of current_product which is {} empty object. But isn't that how to initialize an object?

Upvotes: 3

Views: 12622

Answers (1)

acdcjunior
acdcjunior

Reputation: 135772

Because of:

computed:
  // ...
  focusedProduct_SKUS_NoDupSizes () {
    var newArr = this.current_product.product_SKU.filter((sku, index, self) =>
                                      ^^^^^^^^^^^

You should initialize product_SKU with an empty array:

data () {
  return {
    current_product: {product_SKU: []}, // changed here
    current_ID: '',
  }
}

This is needed because the computed property will be executed right away, even before your Ajax gets a chance to return.

Declare it as empty so the computed doesn't throw an error. When the Ajax fulfills, it will recompute automatically.

Even though the Ajax is started at the created(), it won't return before the computed is executed for the first time. More details about this here.

Upvotes: 7

Related Questions