0

I have an issue with proper passing of the value, getting undefined errors. Would appreciate any input.

Parent Componen

import { LightningElement, api, wire } from 'lwc';
import { getFieldValue, getRecord } from 'lightning/uiRecordApi';
import FOO_NAME_FIELD from '@salesforce/schema/Account.Name';
import FOP_ID_FIELD from '@salesforce/schema/Account.FOP__c';
import HAS_MOBILE from '@salesforce/schema/Account.HasMobile__c';

const fields = [FOO_NAME_FIELD,FOP_ID_FIELD,HAS_MOBILE];
export default class HightlightPanelSubject extends LightningElement {
    @api recordId;
    @api objectApiName;

    @wire(getRecord, { recordId: '$recordId', fields })
    account;

    get name() {
        return getFieldValue(this.account.data, FOO_NAME_FIELD);
    }

    get FOPId() {
        if (this.account.data) {
        return getFieldValue(this.account.data, FOP_ID_FIELD);
    }
    return undefined;
}
    get hasMobile() {
        if (this.account.data) {
            console.log(JSON.stringify(this.account.data));
            return getFieldValue(this.account.data, HAS_MOBILE);
        }
        return undefined;
}

html

<template>
    <c-highlight-panel-header account={account.data} object-api-name={objectApiName} name={name}></c-highlight-panel-header>
    <template lwc:if={account}>{hasMobile}
    <c-highlight-panel-foo record-id={recordId}></c-highlight-panel-foo>
    </template>
    <template lwc:if={FOPId}>{FOPId}
    <c-highlight-panel-fop fopid={FOPId}></c-highlight-panel-fop>
    </template>
</template>

higlightPanelFop

<template>
    <lightning-record-view-form record-id={recordId} object-api-name="Account" density="compact">

        <div class="slds-grid bgc-w">
            <div class="slds-col slds-size_4-of-12 slds-p-left_small">
                <lightning-output-field field-name="CLUID__pc"></lightning-output-field>
                <lightning-output-field field-name="BirthNumber__pc"></lightning-output-field>
                <lightning-output-field field-name="FinServ__Age__pc"></lightning-output-field>
            </div>
            <div class="slds-col slds-size_1-of-12">
                <!-- Doimplementovat copy/paste -->
                <lightning-button-icon icon-name="utility:copy" variant="bare" alternative-text="copy"
                    title="copy"></lightning-button-icon>
                <div></div>
                <div></div>
            </div>
            <div class="slds-col slds-size_4-of-12">
            </div>
            <div class="slds-col slds-size_3-of-12">
                <div class="slds-grid slds-grid_vertical slds-grid_align-center">
                   <div class="slds-col">{hasMobile}
                      <template lwc:if={hasMobile}>
                        <c-hp-icons value={hasMobile} type="has george mobile"></c-hp-icons>
                    </template>
                    </div>
                    <div class="slds-col">
                    </div>
                </div>
            </div>
        </div>
    </lightning-record-view-form>
</template>
import { LightningElement,api } from 'lwc';

export default class HighlightPanelFoo extends LightningElement {
    @api recordId;
    @api value;
    @api type;
}

The value of hasMobile is correctly displayed as "true" when used in parent},however on highlight-panel-foo

the value is undefined. I have no idea what's happening. I have this error in Console "TypeError: Cannot read properties of undefined (reading 'displayValue') " which I failed to mitigate yet. Thank you for any inputs.

1 Answer 1

0

It was my stupid mistake, as I forgot to remove another hasMobile statement from the parent component. That confused me, as I didn't understand why on one line I can get the value and not on the next.. all I needed to do was add a param parent component to pass the value downstream.

You must log in to answer this question.

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