1

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.: enter image description here

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:

enter image description here

5
  • take a look at this recipe, I think it's a bit similar to what you want to do
    – dibocor
    Commented Nov 6, 2019 at 17:43
  • why you need that @api get theList() { return this._theList; } 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. Commented Nov 6, 2019 at 17:54
  • Hi Marcin what is your requirement please provide the code for <c-oqv-list-element Commented Nov 6, 2019 at 18:23

2 Answers 2

1

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"
                }
            })
        );
    }
}
1
  • 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 Commented Nov 7, 2019 at 7:33
0

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.

You must log in to answer this question.

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