5

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);
}
5
  • I set up a quick sample using your code in the LWC playground and I'm seeing the correct value in both the view and the output to the console. Is this all of code that makes up your components? Or could there be something else possibly interfering? – John Towers Jan 10 '19 at 13:22
  • @JohnTowers I'm encountering this as well. My code is here: pastebin.com/JUmVwT3A . The parent component's binding is updated when the button is pressed, but the child component's is not. – Jeff Jan 10 '19 at 23:03
  • @JohnTowers yes value is updating in Class file, you will get updated value in method checkValue of child component but value is not reflected in view child Data : {dta.key}. Please share me Playground link – Mekyush Jariwala Jan 11 '19 at 6:35
  • 1
    Here is my code in the playground. It seems to work there, but does NOT work in an org. developer.salesforce.com/docs/component-library/tools/… – Jeff Jan 11 '19 at 20:37
  • 1
    @Jeff I did some more testing (I put the results here if you're interested) and the behavior in an org seems inconsistent. I can get the template to rerender under some circumstances, though. From what I read in the documentation, it sounds like the template should rerender since the properties on an reactive object are tracked. This seems like a bug - or at least a very confusing behavior that should be made more consistent. – John Towers Jan 11 '19 at 21:07
0

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

0

It seems like it's a bug to not updating the latest data in real-time. The same happened to me.

You can use this method where you can directly call a child component method which sets data for you to show on the child component. the method should be prepended with @api.for example in our case on the child component

@api checkValue(value) {
    this.dta.key = value; 
}

and then you can pass data from a parent component method (updatedValue) when you call this method, like below

updateValue() {
    this.dta.key = 'Sachin';
    this.template.querySelector('c-child').checkValue(this.dta.key);
}

you can refer to this link Playground.

please feel free to contact for more information.

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.