Question

我已经开始使用VueJs进行小型项目的工作，我已经使用Axios库发出了一个get请求，该请求返回了预期的一些数据，但是我无法使用内部安装的此方法来调用loadUsers函数这是我的代码：

export default{
  data(){
     return {
        users : {}
     }
  },
  methods:{
     addCustomer(){
        //var form = document.querySelector('#add-customer');
        var formData = $('#add-customer').serialize();
        axios.post('/Thirdparty', formData).then(function(response){
           helper.validation(response.data);
           //alert(response.data.error);
        });
     },
     loadUsers(){
        axios.get('/Thirdparty/loadUsers').then(function(data){
           this.users = data.data;
        });
     }
  },
  created(){
     let self=this
     self.loadUsers(); 
  }
}

正如您所看到的，我已经使用自变量来调用我的loadUsers（）函数，但是我仍然在这是未定义的错误

Answer 1

您在回调this.users中引用axios.get().then()中的loadUsers()。由于您使用的是标准功能而不是箭头功能，因此this并不引用Vue实例，即this的范围现在不正确。使用箭头功能或更改引用：

// Do this...
export default{
  data(){
     return {
        users : {}
     }
  },
  methods:{
     addCustomer(){
        //var form = document.querySelector('#add-customer');
        var formData = $('#add-customer').serialize();
        axios.post('/Thirdparty', formData).then(function(response){
           helper.validation(response.data);
           //alert(response.data.error);
        });
     },
     loadUsers(){
        axios.get('/Thirdparty/loadUsers').then((data) => { // Using an arrow function.
           this.users = data.data;
        });
     }
  },
  created(){
     let self=this
     self.loadUsers(); 
  }
}

// Or this...
export default{
  data(){
     return {
        users : {}
     }
  },
  methods:{
     addCustomer(){
        //var form = document.querySelector('#add-customer');
        var formData = $('#add-customer').serialize();
        axios.post('/Thirdparty', formData).then(function(response){
           helper.validation(response.data);
           //alert(response.data.error);
        });
     },
     loadUsers(){
        let self=this; // Adding "self"
        axios.get('/Thirdparty/loadUsers').then(function(data){
           self.users = data.data; // Referencing "self" instead of "this".
        });
     }
  },
  created(){
     let self=this
     self.loadUsers(); 
  }
}

VueJS在创建的函数中返回未定义

1 个答案: