[SalesForce] Dynamically update lightning-combobox lightning web component

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"}
    ];
}

Best Answer

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);
    }
}
Related Topic