CustomEvent not firing to parent component

Question

I am not sure why, but my dispatch event isn't firing to the parent when the combo box changes selections. The alert is getting triggered, but setting the boolean values do not get triggered when the combo box changes. I am just trying to re-render when these selections are being made so that way I can have unique buttons for each of the search types. If anyone has any suggestions to the code where I can get these to render, that would be great. As I have read the documentation and have been messing around with this for 2 days and cannot see where this is going wrong.

Child JS snippet:

@api isValueName;
@api isValueEmail;
@api isValueNumber;

@track searchBy = [
     { label: 'Name', value: 'name'},
     {label: 'Email', value: 'email'},
     {label: 'Number', value: 'number'}
];

handleChange(event){
     const searchedByName = new CustomEvent(searchedbyname);
     const searchedByName = new CustomEvent(searchedbyname);
     const searchedByName = new CustomEvent(searchedbyname);
     this.value = event.detail.value;
     this.isValueName= (this.value === 'name');
     this.isValueEmail= (this.value === 'email');
     this.isValueName= (this.value === 'number');
     if(this.isValueName){
          alert("here name");
          this.dispatchEvent(searchedByName);
     } else if(this.isValueEmail){
          alert("here email");
          this.dispatchEvent(searchedByEmail);
     } else if(this.isValueNumber){
          alert("here number");
          this.dispatchEvent(searchedByNumber);}
}

Child HTML:

<template>
     <lightning-combobox label="Search by" value="" placeholder="select search type" options={searchBy} onchange={handleChange}>
</template>

Parent HTML:

<template>
     <c-child searchedbyname={handleSearchedByName} searchedbyemail={handleSearchedByEmail} searchedbynumber={handleSearchedByNumber}></c-child>
     <template if:true={isValueName}>
          <button>Name button</button>
     </template>
     <template if:true={isValueEmail}>
          <button>Email button</button>
     </template>
     <template if:true={isValueNumber}>
          <button>Number button</button>
     </template>
</template>

Parent JS:

isValueName;
isValueEmail;
isValueNumber;

handleSearchedByName(event){
     this.isValueName ? this.isValueName = false : this.isValueName = true;
}
handleSearchedByEmail(event){
     this.isValueEmail ? this.isValueEmail = false : this.isValueEmail = true;
}
handleSearchedByNumber(event){
     this.isValueNumber ? this.isValueNumber = false : this.isValueNumber = true;
}

Answer 1

The documentation on events shows the missing piece here on how to listen for events from the parent side.

To listen for events, use an HTML attribute with the syntax oneventtype. Since our event types are previous and next, the listeners are onprevious and onnext.

In your example, your events types are searchedbyname, searchedbyemail, searchedbynumber, the listeners in the parent component should look like this:

<c-child onsearchedbyname={handleSearchedByName} 
         onsearchedbyemail={handleSearchedByEmail} 
         onsearchedbynumber={handleSearchedByNumber}></c-child>

Likewise, in your child - you created the same event 3 times in a row. I believe it should've been the following:

const searchedByName = new CustomEvent(searchedbyname);
const searchedByEmail = new CustomEvent(searchedbyemail);
const searchedByNumber = new CustomEvent(searchedbynumber);