I have this child component

<c-picklistutility class="meettype" value={typevalue} object-name="TestObj__c" field-name="TestF__c"

On load typevalue is not going to have any value. Its getting assigned in the child component. Basically i am checking if there is any value in typevalue assign it as default one in picklist else if any value is passed assign that one as default one.

The issue i am facing is i am unable to get the default selected value when i am trying to save. On save i am trying this.template.querySelector('.meettype').value;, but i am not getting anything.

Child JS

  renderedCallback() {
    if (this.value) {
      this.template.querySelector('select').value = this.value;
    } else
      if (this.options) {
        this.template.querySelector('select').value = this.options[0].value

HTML (child)

       <select class="slectval slds-select" name={index} onchange={selectionChangeHandler}
            disabled={isPicklistDisabled} required={isAttributeRequired}>
            <template for:each={options} for:item="option">
                <option key={option.label} class="uiInputSelectOption" value={option.value}>

1 Answer 1


This because the value attribute is probably decorated with an api decorator.

When you do this, value becomes read-only within this component.

You need a public @api value var + a private _value var and a getter/setter.


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

Then, you need to make your selectionChangeHandler write to _value, not value.

Don't forget to define a _value var.

  • +1 though it's kind of unusual to use value_ as opposed to _value or even $value.
    – sfdcfox
    Apr 1, 2021 at 21:32
  • changed to _value but never $value because... ugh Apr 1, 2021 at 21:39

You must log in to answer this question.

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