6

I am trying to dynamically update option in a lightning-combobox standard component. I passed to the component a list of option which is annotated with the @track decorator but the combobox won't update when I push new options in this list.

Template :

    <lightning-combobox
            name="progress"
            label="Type"
            value={selectedType}
            options={selectOptions}
            onchange={handleChange}></lightning-combobox>


Controller :

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

export default class TsrWhat extends LightningElement {
    @wire(getList, {recordType: 'Timesheet_Report_What'})
    lists({ error, data }) {
        if (data) {
            for(const list of data){
                const option = {
                    label: list.Name,
                    value: list.Data_Store__c
                };
                this.selectOptions.push(option);
            }
        } else if (error) {
            console.error(error);
        }
    }

    @track
    selectOptions = [
        {label: "All the business actvities", value: "All BA"},
        {label: "List of all the business actvities", value: "ListRoot"}
    ];
}

1 Answer 1

19

In LWC, generally it is not allowed to modify the existing memory location. push will modify existing memory location. This is how all modern libraries like Reactjs works. So, you can create new memory location using spread syntax as below:

@wire(getList, {recordType: 'Timesheet_Report_What'})
lists({ error, data }) {
    if (data) {
        for(const list of data){
            const option = {
                label: list.Name,
                value: list.Data_Store__c
            };
            // this.selectOptions.push(option);
            this.selectOptions = [ ...this.selectOptions, option ];
        }
    } else if (error) {
        console.error(error);
    }
}
2
  • 4
    Just an off-topic question: I really appreciate all your time and efforts in providing valuables answers to our community. How you tend to keep up with the ever-changing LWC concepts? Can you share some ideas on how to learn these concepts and keep up? My project assignments doesn't have any of this applications, so I am willing to learn on my own. Keep up the good work!
    – SatyaV
    Aug 30, 2019 at 14:56
  • 5
    You can follow 3 main sources. Javascript, LWC and Releases. Its a lot of information - just take it step by step - everyday - learn a little. :) Aug 30, 2019 at 15:12

You must log in to answer this question.

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