Why i can't use variable name other then "value" to save my selected value in Combobox (Lightning Web Component)

Question

I'm working on lightning Web Component and i have a combobox. In the Template file i have @track value='' to save my selected value when i change the variable name from @track value='' to @track selectedValue='' my combobox it's not working... can anyone know why i should only use @track value as variable name to save the selected value in the combobox

Answer 1

There is no such restriction to use only the name value. You will need to make sure if you change the name in the JS, the same is updated in the HTML as well.

As an example the below works perfectly fine:

HTML

<lightning-combobox
        name="status"
        label="Status"
        placeholder="Choose Status"
        value={selectedValue} // make sure you update the variable name here as well
        onchange={handleChange}
        options={statusOptions}>
</lightning-combobox>

JavaScript

@track
statusOptions = [
    {value: 'new', label: 'New'},
    {value: 'in-progress', label: 'In Progress'},
    {value: 'finished', label: 'Finished'}
];

@track
selectedValue = 'new';

handleChange(event) {
    this.selectedValue = event.detail.value;
    alert(`Option selected with selectedValue: ${this.selectedValue}`);
}