1

Onchange of combobox value getting error in popUp However ,backend functionality is working as expected

MarkUp

<template>
  <div class="picklist-container">
      <lightning-combobox name="picklist" label={label} value={value} placeholder={placeholder} options={options}
          onchange={handleChange}></lightning-combobox>
  </div>
</template>


HandlerOnchange

    @api label;
    @api placeholder;
    @api options;
    @api value;
    @api context;
   

    handleChange(event) {

        console.log('value sent ftom drop down',event.target.value+''+this.context);
      
        //show the selected value on UI
        this.value = event.target.value;
         //
        const eventPick = new CustomEvent('picklistchanged', {
            bubbles : true,
            composed : true,
            cancelable : true,
            detail: {
                data : {
                    value : event.target.value,
                    context : this.context
                }
            }
        })
        this.dispatchEvent(eventPick);

           ```
5
  • Do you have a valid event handler for your onpicklistchanged? Jul 10, 2022 at 8:52
  • Yes ,it is available ``` picklistChanged(event) { event.stopPropagation(); let dataRecieved = event.detail.data; let updatedItem = { Id: dataRecieved.context, Priority: dataRecieved.value }; //Rating to Priority this.updateDraftValues(updatedItem); this.updateDataValues(updatedItem); } ``` Jul 10, 2022 at 9:37
  • Do you have onpicklistchanged={picklistChanged}, where you include the presented component? Jul 10, 2022 at 11:11
  • handling the event in the grandParent component Jul 10, 2022 at 13:43
  • And only your grandParent component has onpicklistchanged={picklistChanged} in the markup for the child element? And there is no reference to the event in the markup of the child, where the grandChild is included? Jul 10, 2022 at 16:06

1 Answer 1

0

EDIT

lightning:combobox value in event handler is not accessed like this: const changeValue = event.target.value;

change to this: const changeValue = event.detail.value;

Also, the below answer is still. You will need to do this if you want to set the local value.


this.value is an @api annotated property - hence it's read only.

If you try to set it, you'll get an error.

Try using a getter/setter to set your value, and actually write it to an internal _value variable.

set value(value) {
  this._value = value;
}
get value(){
  return this._value;
}

Then you will be able to set this._value in your event handler.

2
  • Hi Casper ,thanks for your help .I removed the "this.value = event.target.value" but issue still there . Jul 10, 2022 at 8:34
  • Edited - there is another issue for you to fix Jul 10, 2022 at 21:52

You must log in to answer this question.

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