1

I have a computed() property with the following console.log within it:

props: {
 productGroup: {
   type: Object,
   default: {},
 },
 filterState: {
   type: Object,
   default: {},
 }
},

computed: {
filterProducts() {
  console.log(this.productGroup.Polarized);
      // outputs --> "{standard: {mirrored:TRUE: Array(8), mirrored:FALSE: Array(5)}}"

  console.log(this.filterState.size);
      // outputs --> "standard"

  console.log(this.productGroup.Polarized, this.productGroup.Polarized[this.filterState.size], this.filterState.size);
      // outputs "{standard: {mirrored:TRUE: Array(8), mirrored:FALSE: Array(5)}}",
                 "undefined", <------ why is that??
                 "standard"

  if (!this.productGroup.Polarized[this.filterState.size] &&
      !this.productGroup['Non-Polarized'][this.filterState.size] &&
      !this.productGroup['Elite Polarized'][this.filterState.size]) {
    return false;
  }
  ...
  ...
  return ...
}

My question is why did this.productGroup.Polarized[this.filterState.size] return undefined when this.productGroup.Polarized is updated with the key(this.filterState.size)? Because of this issue, nothing gets run inside of this computed() property. It always return false.

I did a test using setTimeout()

setTimeout(() => {
console.log(this.productGroup.Polarized, this.productGroup.Polarized[this.filterState.size], this.filterState.size);
}, 1000)

//outputs --> "{standard: {mirrored:TRUE: Array(8), mirrored:FALSE: Array(5)}}",
//            "{mirrored:TRUE: Array(8), mirrored:FALSE: Array(5)}", <---- correct output
//            "standard"

I'm relatively new to Vue.js, I'm not sure if I missed something here with Vue's reactivity. Why does it behave this way? Is there a way to prevent that from happening? I'm happy to provide more info if needed.

Or Assayag
  • 5,662
  • 13
  • 57
  • 93
Yi Ren
  • 841
  • 1
  • 8
  • 17
  • 1
    Are the props being dynamically set on the component? You might be running into a race condition, where the component props are still using default values, before being updated with inherited props: hence the setTimeout works. – Terry Apr 08 '20 at 23:15
  • 1
    looks like `this.productGroup.Polarized` is a STRING, since `"{standard: {mirrored:TRUE: Array(8), mirrored:FALSE: Array(5)}}"` does not look anything like a valid Object - and since a string has no such property has "standard", the result is `undefined` – Jaromanda X Apr 08 '20 at 23:15
  • @JaromandaX Nah, I think the quotes are added by OP just to show the output in the console as he sees it. – Terry Apr 08 '20 at 23:17
  • Does the outputs you mention here come from the first time the computed is run? Or do you get them asynchronous in the console? – Sølve T. Apr 08 '20 at 23:17
  • 2
    The console is a terrible debugging tool due to its live object updating feature. If you must use it, try `console.log(JSON.stringify(whateverObjectYouWantToDebug))` but I highly recommend using an actual debugger – Phil Apr 08 '20 at 23:18
  • 1
    This is probably a duplicate of [How can I make console.log show the current state of an object?](https://stackoverflow.com/questions/7389069/how-can-i-make-console-log-show-the-current-state-of-an-object) but will wait and see – Phil Apr 08 '20 at 23:23
  • @Terry, if so, how do you explain the object's invalid structure? Notice the colon after `TRUE`. – tao Dec 20 '20 at 19:03

0 Answers0