LWC @api property returning as proxy

Question

I am currently stuck on an issue with LWC and would like to get your help if it would be possible.

I am passing a variable (let's call it item) from one LWC to another. item is annotated with the @api decorator and when displaying data related to the item object, I want to call a getter on the JS file to return me information according to the item properties.

Below is a portion of what I have:

export default class ArchivedCaseItem extends LightningElement {
  @api item;  

  get daysAgo(){
    console.log(this.item);
    return 'test';
  }
}

However, instead of displaying the object properties I am receving the following logs:

Proxy {}
[[Handler]]: Object
[[Target]]: Object
[[IsRevoked]]: false

I already tried changing the decorator to @track but that doesn't allow me to access the item's properties. I also tried to create a "duplicated" variable that would basically be something like const test = item; but it also didn't work.

Can you let me know what am I doing wrong?

Best regards and thank you in advance!

Answer 1

The Proxy is an ObservableMembrane that LWC uses to enforce read-only properties and to track changes. This is normal, expected behavior; Locker Service also uses this to enforce security between namespaces. There's nothing wrong with the code at this point; you can still access the attributes as a normal object. If you're having problems with your Proxy, you've done something wrong elsewhere in your code.

Answer 2

When I run into a Proxy during debugging, I do a breakpoint on the corresponding line and run this code in the console of the browser's dev tools:

Object.keys(myProxyItem).forEach(property => {
    console.log(property + ": " + proxy[property]);
});

But @api annotated properties should be treated as read-only, though.