1

I have 2 LWC components and loop through data in the following structure periods period.stages stage.details

Within stage.details I render a table/form for each detail. After the table/form I have an add new row button. The markup is similar to the following pseudocode

<template>
    <template if:true={periods}>
        <template for:each={periods} for:item="period">
            <template if:true={period.stages}>
                <template for:each={period.stages} for:item="stage">
                    <c-innercomponent stage={stage} 
                         The markup within c-innercomponent...
                        <template for:each={stage.details} for:item="detail">
                            A table row is added for each
                        </template>
                         <lightning-button/>  Add-new row button 

This all renders well and I can render my table and my add-new button. On clicking Add-new I add a new row/element to the current stage.details and send it back to the Outercomponent-1 via an event.

On OuterComponent: after receiving the event I reassign (for the correct stage) period.stages.stage.details to the new version. in the console.log I print out this.periods and it all looks good however the UI does not update.

Should this update automatically? I've imported "track" from LWC however I don't @track periods as @track'ing attributes are no longer required.

I tried to use a rebuild array on rebuilding my this.periods via this.periods = [...this.periods, rebuild]; by following the accepted answer in Array.push() won't update Lightning Web Component View but it does not update the UI.

Does anyone know what I may need to do to allow the UI to reflect the changed data?

Note, no data is DML'd at any stage to the database therefore I was thinking @wire would not be a candidate to help.

Any tips would be appreciated. Thanks in advance for your help.

6
  • Do you have key attributes?
    – sfdcfox
    Aug 16, 2021 at 18:04
  • 1
    Also, this is a candidate use case for @track; you want to be able to see changes deeper than just top-level. You don't need to @track simple references (e.g. if the variable itself changes, it will rerender appropriately).
    – sfdcfox
    Aug 16, 2021 at 18:06
  • Hi Thank you. Once again you're a complete star. Adding @track has immediately fixed it. I thought the denotation was no longer required at all and that as long as track was imported it would all work as tracked. Thank you. I'll need to read up more on track to understand when it will still be required to use.
    – RedQueries
    Aug 16, 2021 at 18:18
  • Thanks again @sfdcfox. Is it possible that I can accept your comment as an answer?
    – RedQueries
    Aug 16, 2021 at 18:19
  • No, but I'll add one for you to accept.
    – sfdcfox
    Aug 16, 2021 at 18:19

1 Answer 1

3

Should this update automatically? I've imported "track" from LWC however I don't @track periods as @track'ing attributes are no longer required.

It's no longer necessary for simple objects. For example:

checked = true;

You don't need to @track this, because any change will cause a render. However, once you have a complex object:

settings = { checked: true }

You now need to @track the variable in order to trigger a render (or, copy the entire object).

In other words:

this.settings.checked = false; // will not trigger render if you do not @track
this.settings = { ...this.settings, checked: true }; // copy triggers render

It's useful to use @track if you don't want to have to copy objects. Note that deeply nested objects have to be copied all the way down to trigger render changes, while @track simply does this for you automagically.

The ... operator doesn't do a deep copy, only a "shallow" copy, so when you copied the array, the elements inside were not also copied. There's polyfill methods out there you can find for recursive deep copy, but that's usually overkill when a simple @track annotation will achieve the same desired result.

1
  • Thanks again @sfdcfox
    – RedQueries
    Aug 16, 2021 at 18:44

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.