Vuejs - 调用方法函数时未定义

Question

在VUE组件JS下面使用，在ajax成功内调用“deleteuserParticulars”函数。但是，没有定义获取“deleteuserParticulars”。

不确定我错过了哪个并拨打了这个电话。可以帮助尽快解决这个问题吗？谢谢

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;

Answer 1

您需要使用粗箭头函数来摆脱this 范围。试试这个sn-p

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;

欲了解更多信息：https://stackoverflow.com/a/34361380/10362396