Vuejs - Undefined when calling method function

Question

Used below VUE component JS to call "deleteuserParticulars" function inside ajax success. But, getting "deleteuserParticulars" is not defined.

Not sure which one I missed out on this and make this call. Can help to solve this issue soon pls? Thanks

import Vue from 'vue';
const userComponent = Vue.component('user-form-component', {
  template: componentHTML(),
  props: ['saveddata'],

  components: {
    userParticularsModalComponent
  },
  data: function () {
    return {
      userDetails: []
    }
  },
  methods: {
    deleteuser: function (newUser) {
      let deleteDraftEndpointUrl = $('.main-component').attr('data-delete');
      $.ajax({
        url: deleteDraftEndpointUrl + newUser['draftId'],
        type: 'GET',
        success: function(s) {
          if(s.status == 'success'){
            this.deleteuserParticulars();
          }
        },
        error: function(){
          console.log('Error on delete user', error);
        }
      });
      
    },
    deleteuserParticulars: function(){
      this.userDetails = this.userDetails.filter((user) => (user['info'].PP !== newuser['info'].PP);
      this.userAllDetails = this.userDetails;
      this.$emit('user', this.userDetails);
    }
  },
  mounted: function () {
  },
  updated: function () {
    console.log('U', this.waitForUpdate);
  }
});

export default userComponent;

console.log(true) inside the if statement of `if(s.status == 'success'){` and check you get the true in console — Mohamed Raza, Jul 23 '21 at 16:57
Does this answer your question? [How to access the correct \`this\` inside a callback?](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) — Estus Flask, Jul 24 '21 at 06:18

score 0 · Answer 1 · answered Jul 23 '21 at 17:02

You need to use fat arrow function to get rid of this scope. Try out this snippet

import Vue from 'vue';
const userComponent = Vue.component('user-form-component', {
  template: componentHTML(),
  props: ['saveddata'],

  components: {
    userParticularsModalComponent
  },
  data: function () {
    return {
      userDetails: []
    }
  },
  methods: {
    deleteuser: function (newUser) {
      let deleteDraftEndpointUrl = $('.main-component').attr('data-delete');
      $.ajax({
        url: deleteDraftEndpointUrl + newUser['draftId'],
        type: 'GET',
        success: (s) => { // the fix is here
          if(s.status == 'success'){
            this.deleteuserParticulars();
          }
        },
        error: function(){
          console.log('Error on delete user', error);
        }
      });
      
    },
    deleteuserParticulars: function(){
      this.userDetails = this.userDetails.filter((user) => (user['info'].PP !== newuser['info'].PP);
      this.userAllDetails = this.userDetails;
      this.$emit('user', this.userDetails);
    }
  },
  mounted: function () {
  },
  updated: function () {
    console.log('U', this.waitForUpdate);
  }
});

export default userComponent;

For more information: https://stackoverflow.com/a/34361380/10362396

still it shows "deleteuserParticulars " undefined – WTE Jul 24 '21 at 03:22 — WTE, Jul 24 '21 at 03:22

Vuejs - Undefined when calling method function

1 Answers1