0

I have created a custom lightning page using Lightning web components, having a custom picklist in it, and I am trying to populate the values in the custom picklist on the click of the custom lookup field 'Project'. The custom picklist should hold the values of a custom object 'Unit'. Project and Unit is in a Master-detail relationship.

HTML

  <lightning-card>
          <p class="slds-var-p-horizontal_small">

            <lightning-record-edit-form object-api-name="Price__c">
            <lightning-input-field field-name="Project__c" onchange={projectChange}>
               </lightning-input-field>
              
            </lightning-record-edit-form>
   <select class="slds-select" >
      <option value="Select">Select</option>
      <template for:each={options} for:item="option">
          <option key={option.label} class="uiInputSelectOption" value={option.value}>{option.value}</option>
      </template>
  </select>
           </p>
          
           </lightning-card>

js

import { LightningElement , wire, track} from 'lwc';
import getUnit from '@salesforce/apex/PriceFetch.getUnit';
export default class PriceScreen extends LightningElement {
 @track options;
  projSelected;

   
    projectChange(event) {
      
       
      this.projSelected = event.detail.value[0];

       getUnit({ projId:this.projSelected })

       .then(result => {
        
        this.options = result;
       


       })

       .catch(error => {
        this.options = undefined;


       });

   
    }
}

APEX CLASS

public with sharing class PriceFetch {
   @AuraEnabled(cacheable = true)
    public static List<Unit__c> getUnit(Id projId) {
      
        return [SELECT Id,  Name FROM Unit__c where Project__c = :projId ];
    }
}

Is there any mistake in my code? Please help me

1
  • Please edit your question and format the code using { } button Sep 29, 2020 at 8:49

1 Answer 1

0

The line

<option key={option.label} class="uiInputSelectOption" value={option.value}>{option.value}</option>

will work only if you are that structure from Apex or are manipulating it in JavaScript.

The correct way looking at you code would be

<option key={option.Id} class="uiInputSelectOption" value={option.Id}>{option.Name}</option>

You must log in to answer this question.

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