function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Dennis GonzalezDennis Gonzalez 

passing object to child LWC

I am attempting to pass an object to a child component onclick, however, the result is always an empty object. 

My parent component is pulling a custom list from apex and returning an array of objects. I am iterating through the list and setting each iteration with a data attribute "data-lead". 
  
<template>
    <div data-card="birthdayCard" class="sectionCard cardClosed">
        <div class="sectionHeader" onclick={toggleView}>
            <p class="sectionTitle">Birthdays</p>
        </div>
            <div data-id="birthdaySection" class="slds-m-around_medium main drop-down closed">
                    <template for:each={viewableLeads} for:item="lead">
                        <div key={lead.id} class="previewHeadline" data-lead={lead} onclick={selectLead}>
                            <p class="leadItem">{lead.Name} <span class="sectionName">Birthday</span></p>
                            <div class="subInfo">8/04/1994 - Closed on 4/5/12</div>
                        </div>
                    </template>
                    <template if:false={max}>
                        <p class="btn loadMoreButton" onclick={loadMore}>Load More</p> 
                    </template>
            </div>
            <div>
                <c-lead-details selected-item={currentLead}></c-lead-details>
            </div>
    </div>
</template>
I then have my JS controller 
import { LightningElement, wire , track} from 'lwc';
import getbdayopps from '@salesforce/apex/WorkdayAura.getbdayopps';

export default class bData extends LightningElement{
    bdayLeads
    closed = true
    count = 9
    @track max = false
    size 
    @track viewableLeads
    @track error
    @track currentLead = {}
    constructor(){
        super()
        getbdayopps()
        .then(result => {
            this.bdayLeads = result
            this.viewableLeads = result.slice(0,this.count)
            this.size = result.length
        })
        .catch(err => {
            this.bdayLeads = undefined
        })


    }

    loadMore(){
        this.count += 10
        this.viewableLeads = this.bdayLeads.slice(0,this.count);
        if(this.count >= this.size){
            this.max = true;
        }
    }

    toggleView(evt){
        let birthday = this.template.querySelector(JSON.parse(JSON.stringify('[data-id="birthdaySection"]')))
        let card = this.template.querySelector(JSON.parse(JSON.stringify('[data-card="birthdayCard"]')))
        let classList = birthday.classList.value.split(" ")

        if(classList.includes('closed')){
            birthday.classList.remove("closed")
            card.classList.remove("cardClosed")
            this.closed = false
        }else{
            birthday.classList.add("closed")
            card.classList.add("cardClosed")
            this.closed = true
        }
    }
    
    selectLead(event){
        this.currentLead = event.target.dataset.lead
    }

    
}
finally, the child component. 
import { LightningElement, api } from "lwc";

export default class ChildDynamicRecordForm extends LightningElement {
  @api selectedItem;
 
}
So on click, i am triggering "selectLead" which sets the variable currentLead to event.target.dataset.lead, which should be the object. however the child component is only receiving an empty object. Im not sure if im doing this incorrectly, but any help would be greatly appreciated.

 
GCW LabsGCW Labs
In the parent do you get an object with event.target.dataset.lead? If not, try event.currentTarget.dataset.lead

The child may also not rerender. If you are getting a value in the parent but not the child, then after you set currentLead, try this:

this.template.querySelector('c-lead-details').selectedItem = this.currentLead;

The child html might not display the change either, in which case in the child do this, and in the html use displayItem instead of selectedItem:

import { LightningElement, api } from "lwc";

export default class ChildDynamicRecordForm extends LightningElement {
    displayItem;

    @api
    get selectedItem() {
        return this.displayItem;
    }

    set selectedItem(value) {
        this.displayItem = {...value};
    }
}