CODEWITHSUNDEEP
javascriptvue.jsvuejs2vuexvuex-modules
Swapnil
Swapnil

Reputation: 91

Computed property getting called before prop initialization

In my Vue app, I am getting an array from map getters and I am trying to filter this array based on type which is a prop in a computed property. I checked both of them, both are strings, but the filter is not working properly, since I feel the computed property is called before the prop is initialized with value. Need some help with this?

all: 'mdm/all', // here 'mdm' indicates module name and 'all' is the state

prop: [type]

Inside computed, I have a property called

getData() {
const filteredData = this.all.filter(ele => ele.type === this.type.toLowerCase());
return filteredData.map(item => (
 {name: item.name,
  orderNo: item.order_no
 });
}

In the above code, both ele.type and this.type seems to be strings with similar value (say 'expired') but the filteredData always happens to be an empty array. Not sure what could be cause for this.

Upvotes: 0

Views: 118

Answers (1)

yoduh
yoduh

Reputation: 14709

I would debug what .filter() is doing with a console log inside of it, for example:

this.all.filter(ele => { 
    console.log(`${ele.type} === ${this.type.toLowerCase()}?`, ele.type === this.type.toLowerCase());
    return ele.type === this.type.toLowerCase(); 
})`

which will print out the result of ele.type === this.type.toLowerCase() every loop so you can verify what exactly is happening.

Upvotes: 0

Related Questions