0

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.

1

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.

  • this is really helpful, thanks for the example :) it is very clear. – rajasekhar Aug 18 at 16:03
  • @sfdcfox. push is working fine in sample I checked => developer.salesforce.com/docs/component-library/tools/…. – salesforce-sas Aug 18 at 17:52
  • @salesforce-sas Did you try with lightning-combobox, though? – sfdcfox Aug 18 at 18:05
  • So, can we say that options attribute is immutable property in combobox and this is the reason we have to reassign tracked property instead of modifying? – salesforce-sas Aug 18 at 19:48
1

Options attribute value should be like below:

<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>

Even EmpList does not have any attribute like data.

See the documentation for Combobox.

Edit: Based on question edited. As per @sfdcfox, You need to assign a new value to the options attribute of Combobox instead of push.

  • Thank you, i corrected it and able to access the values. But i see one issue while adding the picklist values dynamically in a JS function, do you know what might be the reason. I updated my question with details. – rajasekhar Aug 18 at 13:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.