Computed property getting called before prop initialization

Question

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.

Answer 1

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.