1

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!

2 Answers 2

5

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.

2
  • Thank you for the insights! The issue was in fact in displaying the data other than accessing it (as that seems to be working as expected). I used JSON.serialize(this.item) and was able to correctly see the properties I wanted. Commented Dec 4, 2020 at 12:45
  • It already says in the link for proxies you posted, but worth mentioning it here as well - Locker Service wraps everything in a proxy when passing variables to another component, but Lightning Web Security (LWS) doesn’t have this 'limitation': developer.salesforce.com/docs/component-library/documentation/…
    – sskular
    Commented Nov 7, 2022 at 11:38
3

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.

2
  • Debugging is easiers with enabling custom formatters in chrome dev tools and setting up breakpoints. -> Chrome DevTools => Settings => Enable custom formatters
    – Raul
    Commented Dec 4, 2020 at 12:09
  • Yes, that is true. I always forget that I have it enabled. But from time to time I still see Proxys even with custom formatters enabled, though. Commented Dec 4, 2020 at 16:17

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .