Trigger component re-render when changing object property

Question

Is it possible to somehow trigger component re-render when the property of the observed object changes? I know that the component will re-render if I replace the object but it does not when I just change its property

class SomeComponent extends LitElement {

      static get properties() {
        return {
          obj: { type: Object, reflect: true }
        }
      }

      constructor() {
        super();
        this.obj = {
           value: 'value' 
        };

      }

      handleClick(value) {
        this.obj.value = value;
      }

      render() {
        return html `
          <div>
            <p>My Value: ${this.obj.value}</p>

            <button @click="${() => this.handleClick('new value')}">Button</button>
          </div>
        `;
      }

    }

 customElements.define('some-component', SomeComponent);

Tried to use this.requestUpdate() and it works, but i am not sure if such solution is optimized

score 2 · Accepted Answer · answered Feb 13 '20 at 09:41

I'd say placing the requestUpdate Method right after you change obj.value is a good Idea.

I work a lot whith this.requestUpdate() and it usally triggers the change i wanted.

You coul also look at the this.updated Method and implement it like this:

updated(changedProperties: PropertyValues): void {
    if (changedProperties.has('obj') triggerMethod()
  }

But this should do it for you:

 handleClick(value) {
    this.obj.value = value;
    this.requestUpdate()
  }

to your concern, using that method is ABSOLUTLY optimized for web-standards :)

Trigger component re-render when changing object property

1 Answers1