Property value is not refreshing on Template when its Non-Primitive type

I am trying to update value of property in Parent Component which is pass in Child component. But after update value is reflecting in child component’c class (.js) but not in view (.html)

Is it possible to update the same value in view as well which is working in case of primitive type.

Here is the code:

parent.html

<template>
parent data : {dta.key}
<lightning-button onclick={updateValue} label="Update Data"></lightning-button>
<c-childcomp dta={dta} ></c-childcomp>

parent.js

@track
dta = {key:"value"};
updateValue() {
    this.dta.key = 'Mekyush';
}

childcomp.html

<template>
child Data : {dta.key} 
<lightning-button onclick={checkValue} label="checkval"></lightning-button>

childcomp.js

@api dta;
connectedCallback() {
    console.log(this.dta);
}
checkValue() {
    console.log(this.dta);
}

Answer

It seems like a bug but i find the workaround.

you have to add one dummy variable in parent and update everytime when you are updating map. also pass dummy variable in child and place in template and hide it.

Please refer Playground

Attribution
Source : Link , Question Author : Mekyush Jariwala , Answer Author : Mekyush Jariwala

Leave a Comment