How do I invoke a value change handler in LWC?
You can use getters and setters like the following to detect changes when a parent component passes a new @api value.
Per the docs:
To execute logic each time a public property is set, write a custom setter. If you write a setter for a public property, you must also write a getter.
Annotate either the getter or the setter with @api, but not both. It’s a best practice to annotate the getter.
Parent.html
<template>
<lightning-input onchange={changePageSize}></lightning-input>
<c-child page-size={pageSize}></c-test-child>
</template>
Parent.js
@track pageSize;
changePageSize(evt) {
this.pageSize = evt.target.value;
}
Child.html
<template>
current page size: {_pageSize}
</template>
Child.js
@api
get pagerData() {
return this._pagerData;
}
set pagerData(value) {
this.setAttribute('pagerData', value);
this._pagerData = value;
this.setup();
}
@api
get pageSize() {
return this._pageSize;
}
set pageSize(value) {
this.setAttribute('pageSize', value);
this._pageSize = value;
this.setup();
}
// private
@track _pagerData;
@track _pageSize;
connectedCallback() {
this.setup();
}
setup() {
console.log('hello');
}
Additional getter/setter examples here.
Furthur reading on the setAttribute
function and what it actually does to a template.
As a FYI, renderedCallback()
fires twice, and I'm not seeing any kind of private _isRendered
check in your code so it's probably worth moving it to connectedCallback()
unless you have a strong reason to put it there.