[Vuejs]-Vue 2 emit not running method, even though setup correctly

by

0👍

From the parent component you should do it as this:

  <Navbar v-on:collaps*m*nu="collapseMenuf"></Navbar>

Child component:

<svg
    @click="collapse_menu($event)"
    xmlns="http://www.w3.org/2000/svg"
    class="hamburger"
    viewBox="0 0 20 20"
    fill="currentColor"
  >

Access this $event inside a function like this:

const collapse_menu = (e) => {
  console.log(e);
  emit('click', e.target);
};

You can find more about vue emits here

0👍

this is little bit confusing. I had face the same problem.
Though documentation of vue.js-v2 said that these

// on child component
this.$emit('event-name')
// on parent template
<child-component-name v-on:event-name="parent-method"></child-component-name>

should work. But unfortunately it didn’t.

I had solved my problem by this:

// on child component
this.$root.$emit('saveSettings', this.apiRequestSetupObj);
// in parent component add this on mount
const thisInstance = this
this.$on('saveSettings', function (data) {
         thisInstance.saveSettings(data);
});

So you can try this out.

note: If you want to know the difference between this.$emit vs this.$root.$emit, then check this question: this.$emit vs. this.$root.$emit, best practice in vuejs

Leave a comment