2

I'm reading about lwc properties and came across a statement.

A component that declares a public reactive property can’t set the property value, except at component construction time. A parent component that uses the component in its markup can set the component’s public property value. In our example, the c-todoitem component can’t update the value of the itemName property in the todoitem.js file.

Based on the above statement I can't set a public reactive property(@api), except for the component construction time. I know we can use getters and setters to set the value, but it does involve declaring a private reactive property(@track).

In this context what is the meaning of component construction time. Is there another way to set the value of public reactive properties in the declared component without the interference of the private reactive properties?

5

It simply means that you need to set the value in just one of two places. Both will be demonstrated here, as well as what's not:

export default class AppName extends LightningElement {
  @api message1 = 'Default message'; // allowed
  @api message2;
  constructor() {
    super(); // must be called, and must be called before using 'this'
    this.message2 = 'New default message'; // also allowed
  }
  onclickhandler() {
    this.message1 = 'Try to change on click...'; // not allowed
  }
}

Note that the constructor is always called constructor, unlike Java and other languages where the constructor is the class' name.


After defining it either inline or via constructor, you are no longer allowed to modify the property at all. It becomes read-only. If you want to be able to communicate to the parent component, the get/set combination is required.

| improve this answer | |
  • +1 Thanks for the explanation, I was able to test the default message however when I try testing New default message Eslint throws a super error. Couple of ways I tried constructor() {this.message1 = 'New default message'; // also allowed } and @api message2 ;constructor(message2){ this.message2 = 'New default message'; // also allowed } – codeyinthecloud Dec 16 '18 at 0:38
  • 1
    @codeyinthecloud I cleaned up the code to include a proper demonstration, thanks for the suggestion. – sfdcfox Dec 16 '18 at 0:43
  • Great, super(); does the trick. Thanks again, sometimes It's hard to move forward in the documentation being stuck at once place! You saved my day! – codeyinthecloud Dec 16 '18 at 0:45
  • @codeyinthecloud I've already put something like 10-12 hours playing with this already. The more I learn, the more I think I'm going to like it. – sfdcfox Dec 16 '18 at 0:46
  • 1
    The official docs are being updated to clarify that you can only set the default value of an @api property. The parent component can always override the value. – Kevin Venkiteswaran Dec 24 '18 at 6:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.