The updated @api value is not getting reflected in the child component in LWC

Question

I am having problem in dynamically getting the value in my child Lightning Web Component I have a Parent Component and Child Component. I am passing the @api value as follows :

Parent.html

<lightning-input type="checkbox" label="isFieldChecked" value={isfieldchecked} onchange={handleValueChange}>
 <c-child 
    isvaluechecked={isfieldchecked}
 ></c-child>
</lightning-input>

Parent.js

isfieldchecked = false;

handleValueChange(event) {
   this.isfieldchecked = event.target.checked; //value onchange is not getting reflected in child component
}

child.html

<lightning-input type="checkbox" label="isChecked" value={isfieldchecked} onchange={handlecheckboxchanged}></lightning-input>

child.js

@api isvaluechecked;
connectedCallback() {
   console.log('isValueChanged::' + this.isvaluechecked);
}
    handlecheckboxchanged() {
        if(this.isvaluechecked) { 
console.log('isValueChanged::' + this.isvaluechecked); //cannot see the value updated when updated on parent
    //perform some operations
        }
    }

In the above scenario, when I check/uncheck the checkbox in the parent component, I dont see it changed in the child component where I am invoking the onchange method.

Answer 1

With the great help of @sfdcfox & @Phil W comments on the answer provided by @sfdcfox, here I have summarised an answer.

Key learning points:

1. onchange event on child is only triggered if you are clicking the checkbox of the child component. Although you are passing in the value from the parent, the value change in parent does not trigger the onchange handler function in the child.

To work with this, what you can do is using a getter/setter and call/perform your onchange method in the setter, because the setter will run each time there's a new value being passed.

Child.Js

_isvaluechecked;
@api 
set isvaluechecked(val){
    console.log('hi'); // just to check to see if setter is called.
    this._isvaluechecked = val;
    this.handlecheckboxchanged();
}

get isvaluechecked(){
    return this._isvaluechecked;
}

handlecheckboxchanged() {
    if(this.isvaluechecked) { 
        console.log('isValueChanged::' + this.isvaluechecked);
    }
}

Once again, I would like to thank @sfdcfox and @Phil W, for their help. As these really helped me gained a good understanding as well! :)
Credits: @sfdcfox and @Phil W.

Answer 2

@api makes a property read-only. The parent component must not use @api for a property it intends to change.

@api isfieldchecked = false;

should be:

isfieldchecked = false;