Search code examples
javascriptpolymerlit-element

lit-element property observer event change

Recommended way to configuring observers on a property value change event.

Currently using the updated method and looping through the changedProperties parameter which works. 

static get properties() {
  return {
    testprop: { type:String }, 
  };
updated(changedProperties) {
  changedProperties.forEach((oldValue, propName) => {
    if (propName=='testprop') {
      console.log('testprop CHANGED!');
      this.dosomething();
    }
  });
}

But seems more overly complicated compared to Polymer 2.0:

testprop: {
  type:String,
  value: '',
  observer: 'dosomething',
},

To observe a property event change and run some code, is there a simpler / recommended way of doing things?

Solution

  • Per Alan's suggestion:

    set testprop(val) {
  let oldVal = this._testprop;
  this._testprop = val;
  this.requestUpdate('testprop', oldVal);
  this.dosomething();
}
get testprop() { return this._testprop; }