0

I'm attempting to build a accordion where all the contacts under each Account drill down like an accordion. I referred salesforce documentation.

<template>
<lightning-card  title="Accounts with Contacts">
    <lightning:accordion aura:id="accordion" >
    <template if:true={accounts}>
        <template for:each={accounts} for:item="account">
            Account - {account.Name}
            <lightning:accordionSection key={account.id} name="A" label="Accordion Title A">
                <aura:set attribute="body">
                    <template for:each={account.Contacts} for:item="co">
                       <p key={co.Id}> Contact - {co.Name}</p>
                   </template>
                </aura:set>
            </lightning:accordionSection>           

        </template>
   </template>
  </lightning:accordion>
  </lightning-card>
 </template>

APEX:

public class FetchMultipleRecords {

@AuraEnabled(Cacheable=true)
public static List<Account> search() {
return [SELECT Id,Industry, Name ,Type,(SELECT id, Name FROM contacts) FROM 
 Account LIMIT 2];        
}
}

My results shows only Accounts without contacts. If I remove the accordion, I get both accounts and contacts together.

Let me know if I'm building it the wrong way.

2
  • this Account - {account.Name} should probably be put into the accordion section label. label="Accordion Title A" looks like it was copy/pasted from the example.
    – gNerb
    Commented Feb 13, 2020 at 22:13
  • Also, I don't think that aura:set is valid for the given context. Docs You should check out slots. The accordion only has actions and default slots.
    – gNerb
    Commented Feb 13, 2020 at 22:15

1 Answer 1

1

You can't use Aura components in LWC. You'll know you're trying to use an Aura component because it'll have a : in it. For example, lightning:accordion is an Aura component, while lightning-accordion is an LWC component. You'll need to look at the correct documentation to get the correct syntax. The same is also true for lightning:accordionSection versus lightning-accordion-section.

1
  • I was able to achieve, with the correct documentation
    – MnZ
    Commented Jun 10, 2021 at 2:13

You must log in to answer this question.

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