0

It's crazy. I'm gonna crash the table. How to show variable {name} ?

Iterated component html:

<template>
    <p>{idx} </p>
</template>

Properly shows:

enter image description here

But When i try to add {name} to html it not works!

js code:

import { LightningElement, api, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
const FIELDS = [
    'Trip__c.Name',
    'Trip__c.Trip_Status__c'
];

export default class TripListItem extends LightningElement {
    @api idx; // got from parent component // works and displayed properly!

    @wire(getRecord, { recordId: '$idx', fields: FIELDS }) rec;

    get name() {
        return this.rec.data.fields.Name.value;
    }
}
  • Have you tried removing the "Trip__c." from your field paths? Having these prefixes is definitely not going to help. – Phil W Jul 10 at 14:12
  • yes, i tried, still the same. console shows "Uncaught (in promise) TypeError: Cannot read property 'fields' of undefined" – Ivan S. Jul 10 at 14:24
  • Yeah, sorry about that. I was suggesting the wrong thing. I forgot that getRecord needs the type at the start of very field path (which is rather silly). – Phil W Jul 10 at 19:33
1

Provisioning data via @wire is asynchronous. In your template you need to guard against this.rec.data being undefined which is the case until data is provisioned.

<template>
  <template if:true={rec.data}>
    (idx} {name}
  </template>
</template>

In your JavaScript add a getter for name.

import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
...
get name() {
  return getFieldValue(this.rec.data, ‘Trip__c.Name');
}

A functioning example using this pattern is https://github.com/trailheadapps/lwc-recipes/tree/master/force-app/main/default/lwc/wireGetRecordUser

0

works with:

const myfields = [
    'Trip__c.Name',
    'Trip__c.Trip_Status__c'
];

export default class TripListItem extends LightningElement {
    @api idx;
    @track error;
    @track name = '-';
    @track status = '-';
    @wire(getRecord, { recordId: '$idx', fields: myfields })
    wireRec({ error, data }) {
        if (error) {
            this.error = error;
        } else if (data) {
            this.name = data.fields.Name.value;
            this.status = data.fields.Trip_Status__c.value;
        }
    }
}

keep testing.

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.