+ Start a Discussion
Sachin Bhalerao 17Sachin Bhalerao 17 

Error in lightning Web Component?

Dear Team ,

I created LWC having search functionality but m getting error plz have a look on image and my code User-added image
<template>
    <div class="slds-m-around_medium">
     
        <div class="slds-m-bottom_small">
            <lightning-input type="text"
               value={sVal}
               label="Contact Name"
               onchange={updateSeachKey}
               ></lightning-input>
         </div>
         
         <lightning-button label="Search"
            onclick={handleSearch}
            variant="brand"></lightning-button>
            
         <!-- custom data table(with SLDS style) to display contact list  -->  
         <table class="slds-table slds-table_cell-buffer slds-table_bordered slds-m-top_small">
            <thead>
               <tr class="slds-line-height_reset">
                  <th class="" scope="col">
                     <div class="slds-truncate" title="First Name">First Name</div>
                  </th>
                  <th class="" scope="col">
                     <div class="slds-truncate" title="Last Name">Last Name</div>
                  </th>
                  <th class="" scope="col">
                     <div class="slds-truncate" title="Phone">Phone</div>
                  </th>
                  <th class="" scope="col">
                     <div class="slds-truncate" title="Email">Email</div>
                  </th>
               </tr>
            </thead>
            
            <tbody>
               <!--iterate all contact records using for-each iteration -->    
               <template for:each={contacts} for:item="contact">
                  <tr class="slds-hint-parent" key={contact.Id}>
                     <td>
                        <div class="slds-truncate">{contact.FirstName}</div>
                     </td>
                     <td>
                        <div class="slds-truncate">{contact.LastName}</div>
                     </td>
                     <td>
                        <div class="slds-truncate">
                           <lightning-formatted-phone value={contact.Phone} ></lightning-formatted-phone>
                        </div>
                     </td>
                     <td>
                        <div class="slds-truncate">
                           <lightning-formatted-email value={contact.Email} ></lightning-formatted-email>
                        </div>
                     </td>
                  </tr>
               </template>
            </tbody>
         </table>
      </div>
</template>


import { LightningElement,track} from 'lwc';
// import server side apex class method 
import getContactList from '@salesforce/apex/customSearchController.getContactList';
// import standard toast event 
import {ShowToastEvent} from 'lightning/platformShowToastEvent'
 
export default class customSearch extends LightningElement {
    //@track: Marks a property for internal monitoring. A template or function using- 
    //this property forces a component to rerender when the property’s value changes.
    @track contacts;
    sVal = '';
 
    // update sVal var when input field value change
    updateSeachKey(event) {
        this.sVal = event.target.value;
    }
 
    // call apex method on button click 
    handleSearch() {
        // if search input value is not blank then call apex method, else display error msg 
        if (this.sVal !== '') {
            getContactList({
                    searchKey: this.sVal
                })
                .then(result => {
                    // set @track contacts variable with return contact list from server  
                    this.contacts = result;
                })
                .catch(error => {
                    // display server exception in toast msg 
                    const event = new ShowToastEvent({
                        title: 'Error',
                        variant: 'error',
                        message: error.body.message,
                    });
                    this.dispatchEvent(event);
                    // reset contacts var with null   
                    this.contacts = null;
                });
        } else {
            // fire toast event if input field is blank
            const event = new ShowToastEvent({
                variant: 'error',
                message: 'Search text missing..',
            });
            this.dispatchEvent(event);
        }
    }
}
 

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="customSearch">
    <apiVersion>47.0</apiVersion>
    <isExposed>true</isExposed>
     <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Plz help me to solve this error

Thanks & Regards
Sachin Bhalerao
 
Sisodia SaurabhSisodia Saurabh
Hi Sachin,
Can you please share your Apex class?  please make sure your getContactList method is "@auraenabled(cacheable=true)"

Thanks,
Saurabh Sisodia