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

Posted 2023-03-07

【中文标题】Vuejs - 调用方法函数时未定义

【英文标题】：Vuejs - Undefined when calling method function

【发布时间】：2021-09-30 18:53:40

【问题描述】：

在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;

【问题讨论】：

console.log(true) 在 if(s.status == 'success') 的 if 语句中，并检查你是否在控制台中得到 true

这能回答你的问题吗？ How to access the correct `this` inside a callback?

【参考方案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://***.com/a/34361380/10362396

【讨论】：

仍然显示“deleteuserParticulars”未定义