1

I did some small changes based on the lwc-recipes, apex series. But I am getting an error telling me e[ki] is not a function, which is obviously from some library code. And I find it hard to debug into it. That error comes from the wire function. If I remove that particular line, the issue is gone.

My apex code:

public class displaySampleContactController {
    @AuraEnabled(cacheable=true)
    public static List<Contact> getContactsByName(String searchKey){
        if (String.isBlank(searchKey)) {
            return new List<Contact>();
        }
        String key = '%' + searchKey + '%';
        return [SELECT Id, Name, Title, Phone, Email, Picture__c 
                FROM Contact 
                WHERE Name LIKE :key 
                AND Picture__c != null 
                LIMIT 1];
    }
}

js:

import { LightningElement, track, wire } from 'lwc';
import getContactsByName from '@salesforce/apex/DisplaySampleContactController.getContactsByName';

export default class DisplaySampleContact extends LightningElement {
    @track contactName = '';
    @track searchKey = '';

    @wire(getContactsByName, {searchKey: '$searchKey'})
    contacts; //This is the line which causes the page to break

    handleKeyChange(event) {
        this.contactName = event.target.value;
    }

    handleSearch(event) {
        this.searchKey = this.contactName;
    }
}

html:

<template>
    <lightning-card
        title="DisplaySampleContact"
        icon-name="custom:custom63"
    >
        <div class="slds-m-around_medium">
            <lightning-layout vertical-align="end" class="slds-m-bottom_small">
                <lightning-layout-item flexibility="grow">
                    <lightning-input
                        type="search"
                        onchange={handleKeyChange}
                        label="Search"
                        value={contactName}
                    ></lightning-input>
                </lightning-layout-item>
                <lightning-layout-item class="slds-p-left_xx-small">
                    <lightning-button
                        label="Search"
                        onclick={handleSearch}
                    ></lightning-button>
                </lightning-layout-item>
            </lightning-layout>
            <template if:true={contacts}>
                <template for:each={contacts} for:item="contact">
                    <p key={contact.Id}>{contact.Name}</p>
                </template>
            </template>
        </div>
    </lightning-card>
</template>
2

I think that the results are stored under the data property, so it would be contacts.data instead of just contacts in your iteration:

<template for:each={contacts.data} for:item="contact">
    <p key={contact.Id}>{contact.Name}</p>
</template>

More about this here.

| improve this answer | |
3

If a property is decorated with @wire, the results are returned to the property’s data property

Since contacts is a property or function, you should probably assign it to a variable within the context of your class, and fetch the property's data as such:

@wire(getContactsByName, {searchKey: '$searchKey'})
    loadContacts(result){
        this.contacts = result;
    };

you wil have to update your template to actualy fetch the properties data:

<template for:each={contacts.data} for:item="contact">
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.