[SalesForce] Pick List values added dynamically in Java Script are not reflecting in Lightning:combobox LWC

I am trying to pass a list of pick list values dynamically to lightning-combobox , but the values are not rendering in the list. Below is the sample code i am writing.

JS Code: 

@track EmpList= [{ label: "Emp1", value: "EMP1Code"},{ label: "Emp2", value: "EMP2Code"}];

HTML Code:

<template if:true={EmpList}>
        <lightning-combobox label="Select an Employee"
                name="del_emp" class="del_emp"
                placeholder="Select an Employee"
                options={EmpList}
                value={value}
                >
        </lightning-combobox>
</template>

The picklist is coming on UI, but the values are not available to select, is there something wrong i am doing?

— As Rahul mentioned i have updated the options and it's working well, but when i try to add additional picklist values using JS function Combobox Is not reflecting the newly added ones.

JS Code:

    this.AddressList.push({ label: "Emp3", value: "EMP3Code"});

Before above code ran below is the console.log output

[{"label":"Emp1","value":"EMP1Code"},{"label":"Emp2","value":"EMP2Code"}]

After adding the value below is the console.log output 

[{"label":"Emp1","value":"EMP1Code"},{"label":"Emp2","value":"EMP2Code"},{"label":"Emp3","value":"EMP3Code"}]

Even though the values are coming in the console.log the picklist is not reflecting the latest added values.

Best Answer

Push won't show the new changes to a @track attribute. You need to actually assign a new value to the @track attribute. Here is a demo I wrote for you.

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

export default class App extends LightningElement {
    @track optionList = [{label:'-- none --',value:''}];
    @track value;
    newValue;
    newLabel;
    setNewValue(event) {
        this.newValue = event.target.value;
    }
    setNewLabel(event) {
        this.newLabel = event.target.value;
    }
    addNewOption() {
        this.optionList = [...this.optionList, {label: this.newLabel+'', value: this.newValue+''}];
        this.newValue = '';
        this.newLabel = '';
        if(this.optionList.length===1) {
            this.value = this.optionList[0].value;
        }
    }
}

<template>
    <lightning-input
        label="New Value"
        name="new-value"
        onchange={setNewValue}>
    </lightning-input>
    <lightning-input
        label="New Label"
        name="new-label"
        onchange={setNewLabel}>
    </lightning-input>
    <lightning-button label="Add" onclick={addNewOption}>
    </lightning-button>
    <hr></hr>
    <lightning-combobox 
        label="Choose One"
        name="options"
        placeholder="Choose One"
        options={optionList}
        value={value}>
    </lightning-combobox>
</template>

Here, we use the spread syntax to copy the array (...this.optionList) and add the new element. This allows us to trip the @track decorator and allow the UI to update.

Related Topic