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
Ryan Avent 14Ryan Avent 14 

unable to read properties from customEvent

I have a custom event that is dispatched from my clild LWC 

Event dispached from child:

spinner(boolean){
    console.log('set spinner - ' + boolean);
    const spinner = new CustomEvent('spinnernotification', {
      display: boolean
    });
    this.dispatchEvent(spinner);  
  }

The event is being retrieved by the parent LWC but i am unable to read the display property, and am getting an undefined.

Console lines:

set spinner - false
called with display value undefined

Parent LWC:

displaySpinner(customEvent){
	
	if(null != customEvent){
		console.log('called with display value ' + customEvent.display);
		this.spinner = customEvent.display;
	}else{
		console.log('customEvent display is null');
		this.spinner = false;
	}
}

if i stringify the customEvent in the parent all i see is the below:

value {"isTrusted":false,"composed":false}

Gian Piere VallejosGian Piere Vallejos
To send data through a CustomEvent, you need to set a detail property in the CustomEvent constructor.

Try this:  
spinner(boolean){
    const spinner = new CustomEvent('spinnernotification', {
      detail: { 
          display: boolean
      }
    });
    this.dispatchEvent(spinner);  
  }

And access to the value using customEvent.detail.display in the parent