Emitting a custom event within a function in methods object

Question

When a v-on:click event is triggered on my button, I would like to run a function within my methods object inside my Vue component. Unfortunately, since I need to emit a custom event, I get the following error in my console: $emit is not defined.

How do I emit a custom event within a function in my methods object?

The button in my template

<button class="edit-recipe-modal-btn" v-on:click="updateRecipeClicked">Save Edits</button>

My methods object containing code to emit a custom event

methods: {
  updateRecipeClicked() {
    $emit('update-recipe-clicked', newRecipe);
    // some other code will be written here
  }
},

Kavindra Kavindra · Accepted Answer · 2017-11-29T04:50:33

Try with this

methods: {
  updateRecipeClicked() {
  this.$emit('update-recipe-clicked', this.newRecipe );
  // some other code will be written here
  }
},

Emitting a custom event within a function in methods object

1 Answers