CODEWITHSUNDEEP
javascriptvue.jsvuejs3
Steven Eckhoff
Steven Eckhoff

Reputation: 1042

JS Proxy Property Value Differs from Target Property Value in Vue.js Component Prop

I have two Vue.js components in a parent child relationship. The parent is passing data to the child by binding its data to the child's prop.

    <stacked-bar-chart :data="data"></stacked-bar-chart>

In the child when I read the property I get 0 which is different from the value that I get in the parent.

Here is what I see in the console log.

Parent

enter image description here

Child

enter image description here

Notice how in the child the proxy's totalMinutes is 0 and the proxy's target has a totalMinutes of 225.

I have searched all over to no avail. Hopefully someone can explain what is going on.

Thanks!

Upvotes: 2

Views: 753

Answers (1)

Daniel
Daniel

Reputation: 35714

_This is a bit of a quantum physics problem. The act of being observing changes the outcome._😁

The problem you are seeing is that you are seeing two states of the same proxy, at different times.

When the first line is being written to your debug console, the value of totalMinutes is 0. When you manually expand it, however, it show the latest value. So the object doesn't actually have quantum properties, it is just that the string representation of the proxy no longer represents the actual value.

This behaviour is not unique to Proxies though. Here is an example using a simple object

let a = {totalMinutes: 0}
console.log(a)
a.totalMinutes += 224
console.log(a)

if you run that code and view the result in the browser's console panel you will see similar issue on the first object if you expand it

enter image description here

Upvotes: 2

Related Questions