LWC tracked variable not changing page

Question

Hello so i am building my component which is suppose to display list. I am using foreach and tracked variable.

So here is component html:

<template>
    QuoteLevel {num} <lightning-button-icon icon-name="utility:record_create"  variant="border-filled" alternative-text="Create Quote" onclick={handleQuoteCreation}></lightning-button-icon>
    <ul class="myUL slds-p-left_large">
        <template for:each={_theList} for:item="ListElement">
            <c-oqv-list-element key={ListElement.theQuote.Id} the-line={ListElement}></c-oqv-list-element>
        </template>
    </ul>
</template>

The component works fine but now i want to add one more line to _theList just by doing _theList.push(...); but nothing changes.

If _theList is decorated with track shouldn't it refresh?

here is js:

import { LightningElement, api, track } from 'lwc';

export default class OqvListDisplay extends LightningElement {
    @track _theList;
    @track num;

    set theList( tL ) {
        this._theList = tL;
    }

    @api get theList() {
        return this._theList;
    }

    handleQuoteCreation() {
        this._theList[0].theQuote.Id = 0; //push( { theQuote: { Id : null }, QuoteLines : [] } );
        this.num = this._theList.length;
    }

}

What is strange the other variable num which i made to test if code is refreshed is also not changing.

Any help would be great :( i am kind of stuck here.

Some picture wiht the most useless error log ever.:

Edit2 :

I changed code to be like this:

handleQuoteCreation1( eve ) {
    this.QVData.Quotes = [ ...this.QVData.Quotes ,{ theQuote: { Id: '000' }, QuoteLines: []}];
}

and error message changed to:

take a look at this recipe, I think it's a bit similar to what you want to do — dibocor
– dibocor, Commented Nov 6, 2019 at 17:43
Please see this github.com/GoogleChrome/proxy-polyfill/issues/20 the error and developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — Avijit Chakraborty
– Avijit Chakraborty, Commented Nov 6, 2019 at 17:50
why you need that @api get theList() { return this._theList; } — Avijit Chakraborty
– Avijit Chakraborty, Commented Nov 6, 2019 at 17:51
@AvijitChakraborty not sure yet i am learning LWC in way i come up with small project and try to do it. So currently i am coping code and then get to what do each part. If you have some nice article about getters setters i would love to have it :) As well you link you provided me with. I also found it but it gives me no answer in my case. — Marcin Trofiniak
– Marcin Trofiniak, Commented Nov 6, 2019 at 17:54
Hi Marcin what is your requirement please provide the code for <c-oqv-list-element — Avijit Chakraborty
– Avijit Chakraborty, Commented Nov 6, 2019 at 18:23

Avijit Chakraborty · Accepted Answer · 2019-11-06 18:50:00Z

If your goal is the child to parent communication, please see here

below is the sample code to update parent @track variable from child.

===============

HTML code

=============

<template>
    {newVariable}
    <button onclick={changeMe}>Change</button>
    <template for:each={newVariableList} for:item="ListElement">
            {ListElement.description} 
    </template>
<c-child-component new-variable-list={newVariableList} onupdateparent={handelChildChange}></c-child-component>
</template>

================

JS for parent

===============

import { LightningElement, track,api } from 'lwc';

export default class parentComponent extends LightningElement {
    @track newVariable = 'test';
    @track newVariableList  = [
        { id: 1, description: 'Explore recipes\n', priority: true },
        { id: 2, description: 'Install Ebikes sample app\n', priority: false }
    ];
    changeMe(event) {
        this.newVariable = Math.random();
    }
    @api get newVariable() {
        return this.newVariable;
    }
    handelChildChange(event) {
        //your code goes here get event detail.
        //change your parent track variable
    }
}

============

Child HTML

============

<template>
<br></br> I am child.............<br></br>
<template for:each={newVariableList} for:item="ListElement">
    {ListElement.description}
</template>
<button onclick={updateParent}>Update Parent</button>
</template>

============

Child JS

============

import { LightningElement, track,api } from 'lwc';
export default class childComponent extends LightningElement {
    @api newVariableList;
    updateParent() {
        this.dispatchEvent(
            new CustomEvent("onupdateparent", {
                detail: {
                    name: "value"
                }
            })
        );
    }
}

Well i will try this out i know about bubling but when i moved this button to parent and tried to change the tracked there variable it still gave me an error. Parent get's this variable from wire method which download it from Salesforce — Marcin Trofiniak
– Marcin Trofiniak, Commented Nov 7, 2019 at 7:33

Marcin Trofiniak · Accepted Answer · 2019-11-07 10:25:59Z

So i want to say thank you to Avijit his answer was helpful but not 100%.

So as he sad i need to bubble event up to parent. But even then i had an error. So it appears that class providing me with whole wrapper object from SF was not good enought and couldn't handle adding new line there. So solution was to copy what i received from wired method from SF with simple:

JSON.parse(JSON.stringify(data));

That solved issue with pushing my change back to SF.

So for them who look for help with such issue. 1. If you provide child component with variable of father one have to bubble event up or just make button in parent. 2. if you have wired method and use data from it. One need to either build really good setter on side of Salesforce or work on copy of data and update it later.

Stack Exchange Network

LWC tracked variable not changing page

2 Answers 2

You must log in to answer this question.

Hot Network Questions

LWC tracked variable not changing page

2 Answers 2

You must log in to answer this question.

Related

Hot Network Questions