+ Start a Discussion
Abers55Abers55 

Lighting component reactivity issue

I have written a simple component that outputs data based on an account selected on screen by the user.  When the user selects the account,  the Id is picked up from the change event and the data is generated using a a wired property.  However,  the data does not update onscreen.  
  • I can't tell if the propery is being populated or not
  • I can see that the getter does not fire to populate the data,  but,  I don't know why
Here's my code:
<template>
    <lightning-card
        title="Account Address"
        icon-name="standard:account"
    >
        <div class="slds-m-around_medium">

            <lightning-record-edit-form object-api-name="Contact" record-id={recordId}>
                <lightning-messages></lightning-messages>
                <lightning-input-field field-name="AccountId" onchange={handleAccountChange}></lightning-input-field>
            </lightning-record-edit-form>

            <lightning-input type="text" label="Billing Street" value={billingStreet}></lightning-input>
            <lightning-input type="text" label="Billing City" value={billingCity}></lightning-input>
            <lightning-input type="text" label="Billing Postal Code" value={billingPostalCode}></lightning-input>
            <lightning-input type="text" label="Billing Country" value={billingCountry}></lightning-input>
           
        </div>
        
    </lightning-card>
    
</template>
 
import { LightningElement, api, wire} from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';

import Account_BillingStreet_Field from '@salesforce/schema/Account.BillingStreet';
import Account_BillingCity_Field from '@salesforce/schema/Account.BillingCity';
import Account_BillingPostalCode_Field from '@salesforce/schema/Account.BillingPostalCode';
import Account_BillingCountry_Field from '@salesforce/schema/Account.BillingCountry';

const ACCOUNT_ADDRESS_FIELDS = [Account_BillingStreet_Field, Account_BillingCity_Field, Account_BillingPostalCode_Field, Account_BillingCountry_Field];

export default class accountAddressDisplay_v2 extends LightningElement {
    recordId;
    accountId;

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

    handleAccountChange(event) {
        const newAccountId = event.detail.value;
        console.log('newAccountId: ' + newAccountId);

        if(newAccountId.length > 0) {
            this.accountId = newAccountId;
            console.log('this.accountId: ' + this.accountId);
        }
    }

    get billingStreet() {
        console.log('billingStreet get request made');
        return getFieldValue(this.account.data, Account_BillingStreet_Field);
    }

    get billingCity() {
        return getFieldValue(this.account.data, Account_BillingCity_Field);
    }

    get billingCountry() {
        return getFieldValue(this.account.data, Account_BillingCountry_Field);
    }

    get billingPostalCode() {
        return getFieldValue(this.account.data, Account_BillingPostalCode_Field);
    }

    displayError(error) {
        let message = 'Unknown error';
        if (Array.isArray(error.body)) {
            message = error.body.map(e => e.message).join(', ');
        } else if (typeof error.body.message === 'string') {
            message = error.body.message;
        }
        this.dispatchEvent(
            new ShowToastEvent({
                title: 'Error loading opportunity',
                message,
                variant: 'error',
            }),
        );
    }
}

What am I missing here?