0

I'm trying to perform the following: calling from a parent getter to child getters to retrieve information at parent level.

Each child is a complex object that can change, and I need to locally know when it changed, and the new amount inserted.

export default class ChildLWC extends LightningElement 
{
    // API variables
    @api obj;

    // TRACK variables
    @track changedObj;

    // HOOK LIFECYCLE
    connectedCallback()
    {
        this.changedObj= Object.assign({}, this.obj);
    }

    @api get anyChange(){   return Object.keys(this.changedObj).some(key => {return this.obj[key] != this.changedObj[key]; })}
    @api get amount(){  return this.changedObj.Amount; })}


}

Then, in my parent compononent, the one that calls and render each of these childs, needs to know the total changed amount for every child component, so I tried to call every amount() method for each child from the parent.

So parent would be similar to this:

export default class ParentLWC extends LightningElement 
{
    // TRACK variables
    @track objs = [];

    // GETTERS
    get billingAmount()
    {  
        const childCmps = this.template.querySelectorAll('c-child-lwc');

        return  [...childCmps ]
            .reduce((acc, cmp) => 
            { 
                return acc+ cmp.amount(); 
            }, 0);  
    }
}

But the querySelectorAll returns me nothing.

Can anyone let me know if I'm even close to the approach that I should follow for these goal?

Thanks all!

1 Answer 1

0

A getter is accessed as a property, not a method. Do not include the () when getting amount from the child in the parent method:

return [...childCmps].reduce((a, v) => a + v.amount, 0);

Also, in the general sense, keep in mind that getters don't trigger automatically unless one "real" property also changes, so this design won't automatically call render or renderedCallback unless a change is detected on objs.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .