this.$emit is not a function within ajax success request

Question

I have the code below:

remove Dog: function(dog) {
self = this;
const updated = this.pets.filter(o => o !== dog);
    $.ajax({
        type: "PATCH",
        url: //irrelevant,
        'data': //irrelevant,
        'dataType': 'json',
        success: function (result) {
            self = this;
            this.$emit('update:pets', updated);
        },
        error: function (result) {
        }
    });
}

I am trying to have an emit command after the success of the ajax request. The ajax works fine so don't worry about that. I am just unable to do the emitting because it says that this.$emit is not a function.

Can anyone help?

Answer 1

this property has access to your scope level properties because it's a function and not an arrow function. So when you access the properties or method which is not in the scope of that function, it returns undefined or not a function.

To fix it, Make your success function as an arrow function of Javascript.

success: (result) => {
            this.$emit('update:pets', updated);
        },

Another way is to remove the self inside the success method and use the outer self.

success: function (result) {
            self.$emit('update:pets', updated);
        },