I have a child lwc which receives an array as a public property (@api inputArray), does some work on it, and then returns another array via events to the parent.
When the input array is changed by the parent, I want the code to run and the event to be sent. Currently, I have a for:each within the lwc.html that runs through the array (but displays nothing), then when the inputArray is changed, the lwc is re-rendered and I can use the renderedCallback to send my event.
But it seems kind of awkward to have a for:each loop doing nothing in order to trigger the re-render and run this code.
What is the good and convenient way of recognising and handling change in a lwc public property? Or is what I'm doing already the best?
(For the sake of simplicity below, I've left out the code that is altering the array and just returning a string)
childLWC.js
import { LightningElement, api } from 'lwc';
export default class FilterLWC extends LightningElement {
@api inputArray;
renderedCallback(){
console.log('rendered');
this.dispatchEvent(new CustomEvent('childEvent', {detail: {newList: "woooo" }}));
}
}
childLWC.html
<template>
<div>
<template for:each={inputArray} for:item="arrayElement">
<p key={arrayElement}>
</p>
</template>
</div>
</template>