[Vuejs]-Vue button related event not fired

by

1👍

✅

If you want to listen to an event within the component that emitted that event, you use the instance $on method:

  mounted() {
    this.$on("close", () => {
      this.closeModal();
    });
  }

The template event handler @close="closeModal()" is used to listen to events from parent. It has no effect within the child component.

The working codesandbox: https://codesandbox.io/s/loving-kirch-vrhwn?file=/src/components/EditCategory.vue .

👤Igor Moraru

2👍

You have dispatch event to parent but in parent component you have not done any thing with "close" event. Here, in GenericItem.vue I have made event listener with @close="closeBox($event)" . Here, it will trigger method of closeBox

GenericItem.vue

Changes on Template

 <edit-category
  v-if="editCategoryStatus"
  :taskItem="taskItemLocal"
  @close="closeBox($event)"
/>

Add one closeBox method

closeBox() {
  this.editCategoryStatus = !this.editCategoryStatus;
},

Add editCategoryStatus on data

 data() {
return {
  editCategoryStatus: true,
  taskItemLocal: {
    type: Object,
    default: {},
  },
};
👤Hira Kumar Maharjan

0👍

You could just make your button like this. You made this more complicated than it should be

<button class="modal-default-button" @click="showModal = false">

Also, there is this example from the official docs
here.

👤tpliakas

Leave a comment