[Vuejs]-Event not fired when trying to fire event from a component to his grandparent

by

0👍

✅

It’s the way you’re declaring the function.

When you use ES5, this is referring to the function. You want to refer to the component, so you need to bind it differently.

function () {} -> this refers to this function’s scope.
() => {} -> this is preserved, referring to the component.

Change this:

.then(function(){
                 this.$emit('newItem');
                 this.onReset();
               })

To this:

.then(() => {
             this.$emit('newItem');
             this.onReset();
            })

More reading: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

To clarify a little bit more, the error was thrown because it was expecting the function scope to have an $emit property. By preserving the this binding, it will check the component for an $emit property, which it has.

Leave a comment