• portgus Ace 7
  • NEWBIE
  • 15 Points
  • Member since 2021

  • Chatter
    Feed
  • 0
    Best Answers
  • 0
    Likes Received
  • 0
    Likes Given
  • 0
    Questions
  • 2
    Replies
Hi All,
Getting below error on Lightning Web Components SuperBadge at Step 4.All the Boat Types are displaying in dropdown and when I choose different Boat Types, results are showing. 
Challenge Not yet complete... here's what's wrong:
We can’t find the correct settings set for the lightning-combobox in the component boatSearchForm HTML. Check that the component was created according to the requirements, including the correct function for the onchange event, correct options, and values, using the correct case sensitivity.

boarSearchForm.html
-------------------------------
<template>
  <lightning-card>
      <lightning-layout horizontal-align="center" vertical-align="end">
      <lightning-layout-item class="slds-align-middle" padding="horizontal-medium">
          <lightning-combobox variant="label-hidden"
            label="Boat Type"
            value={value}
            placeholder="All Types"
            options={searchOptions}
            onchange={handleSearchOptionChange} class="slds-align-middle">
          </lightning-combobox>
      </lightning-layout-item>
    </lightning-layout>
  </lightning-card>
</template>

boatSearchForm.js
---------------------------
import { LightningElement,wire,track } from 'lwc';
import getBoatTypes from "@salesforce/apex/BoatDataService.getBoatTypes";
export default class BoatSearchForm extends LightningElement {
    selectedBoatTypeId = '';
    value='';
    // Private
    error = undefined; 
   
    // Needs explicit track due to nested data
    @track searchOptions;
    label;
    //value;
    
    // Wire a custom Apex method
    @wire(getBoatTypes)
      boatTypes({ error, data }) {
      if (data) {
         // console.log('Dataloaded',data);
          this.searchOptions = data.map(type => {
              // TODO: complete the logic
            return {
                label:type.Name,
                value:type.Id
            }     
           
         
        });      
        this.searchOptions.unshift({ label: 'All Types', value: '' });
      } else if (error) {
        this.searchOptions = undefined;
        this.error = error;
      }
    }
    
    // Fires event that the search option has changed.
    // passes boatTypeId (value of this.selectedBoatTypeId) in the detail
    handleSearchOptionChange(event) {
      //  event.preventDefault();
      // Create the const searchEvent
      //const boatTypeId=event.detail.value;
      this.selectedBoatTypeId=event.detail.value;
      console.log('Selected Boat Type Id', this.selectedBoatTypeId);
      // searchEvent must be the new custom event search
      const searchEvent= new CustomEvent('search',{detail:this.selectedBoatTypeId});
     // const searchEvent = new CustomEvent('search', {        detail: { boatTypeId: this.selectedBoatTypeId }      });
      this.dispatchEvent(searchEvent);
    }
}

Appreciated your help.

Thanks,
Naren