You need to sign in to do that
Don't have an account?
Sachin 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
Plz help me to solve this error
Thanks & Regards
Sachin Bhalerao
I created LWC having search functionality but m getting error plz have a look on image and my code
<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
Can you please share your Apex class? please make sure your getContactList method is "@auraenabled(cacheable=true)"
Thanks,
Saurabh Sisodia