Question

我在调用API（从挂载函数调用方法）后尝试更新组件的数据

axios.get("getInfo")
    .then(function(res){
        this.result = res.data.result
        }).catch(function(err){
        console.log(err)
})

然而，＆＃34; this.result = res.data.result＆＃34;没有被执行但是当我在调用之前粘贴相同的行时，我得到结果更新（如this.data.result = 20）。此外，当我尝试console.log（res.data）时，我没有得到回应

我还在控制台上收到请求已完成的消息

XHR完成加载：GET＆＃34; http://app/getInfo＆＃34;。

我的挂载功能就像这样

mounted:function(){
   this.setData()
}, 
methods:{
   setData:function(){
      console.log(this.pullData())
   },
}

我做错了什么？提前致谢

Answer 1

首先需要在变量中存储对组件的引用，然后在函数中使用变量而不是 this 关键字引用它;原因是您在then创建了一个新函数，this因此引用了函数而不是Vue组件：

var ref = this;

axios.get("getInfo")
    .then(function(res){
        ref.result = res.data.result
//      ^^^ ref instead of this         
        }).catch(function(err){
        console.log(err)
})

另一种更直接的方法是使用没有this上下文的箭头函数：

axios.get("getInfo").then(res => {     // arrow function instead of anonymous function
  this.result = res.data.result
}).catch(err => {
  console.log(err)
})

调用挂载函数后如何更新组件数据？

1 个答案: