How to properly handle a prop change with a LitElement component? - polymer

Question

My scenario:
I have a web component created with LitElement which has an object property.
In order to initialise it, i am waiting for the element to get created:
<script>
document.addEventListener("DOMContentLoaded", () => {
const instance = document.querySelector("#myInstance");
instance.config = {
data: [
{ firstName: "John", lastName: "Doe", age: 32 },
{ firstName: "Jane", lastName: "Boe", age: 30 },
]
};
});
</script>
<my-component id="myInstance"></my-component>
Let's say that i am going to change this data prop from time to time.
I would like to check the value of the data once it is changed and then decide what i should do next. In order to do that, this is the code of my web component:
#customElement("my-component")
export class MyComponent extends LitElement {
#property({ type: Object }) data: Object;
protected updated(_changedProperties: Map<PropertyKey, unknown>): void {
console.log(_changedProperties);
}
render() {
return html`
<div>blabla</div>
`;
}
}
The problem is that _changedProperties map has data but it is still undefined.
What am i missing here?

Answer 1

changedProperties is a Map of all the property names that changed... e.g. you can use it to check what changed - if you want to access the actual value you can use the property directly.
it look like this
if (_changedProperties.has('myProperty')) {
// react to a myProperty change
console.log('The new value of myProperty is', this.myProperty);
}