1

I am having an issue with my dispatched event firing on my parent component:

Child JS


@api selectedSurveys

 handleAddSurveyClick() {
    this.showSurveyQuestions = false;
    this.selectedSurveys.push({
      surveyLabel: this.surveyNameLabel,
      surveyId: this.surveyNameValue,
      surveyVersionLabel: this.surveyVersionLabel,
      surveyVersionId: this.surveyVersionValue
    });
    //dispatch selected surveys up to parent
    const selectedSurveyItem = new CustomEvent("selectedSurveys", {
      detail: this.selectedSurveys
    });
    this.dispatchEvent(selectedSurveyItem);

Parent JS

  selectedSurveys(event) {
    console.log(event);
    this.selectedSurveyData = event.detail;
    console.log(this.selectedSurveyData);
  }

It appears that selectedSurveys() is not getting called for some reason.

1 Answer 1

4

I presume that your template is incorrect. The event handler should be bound as:

<c-child onselected-surveys={selectedSurveys}>

This is a rather awkward notation; it is recommended that you do not use capital letters at all in event names for this reason, and to conform with the standards.

The CustomEvent() constructor has one required parameter, which is a string indicating the event type. As a component author, you name the event type when you create the event. You can use any string as your event type. However, we recommend that you conform with the DOM event standard.

  • No uppercase letters
  • No spaces
  • Use underscores to separate words

You should read the full documentation on events for other rules you should obey to avoid complications.

You must log in to answer this question.

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