Javascript 在vuejs应用程序中从axios获取数据时出错

嘿，我正在尝试使用vuejs fastifyjs（节点框架）制作一个完整的堆栈应用程序。vue应用程序从我开发的api中获取数据，并在浏览器控制台中显示数据，但不会在应用程序中呈现数据。我甚至试着在mount函数中加载它，但什么也没发生

下面是我正在使用的完整代码

const-app=新的Vue({
el:“#应用程序”，
数据：{
信息：[{
名称：“Vue”，
年龄:19岁，
imageUrl:'s3.aws.amazon.com'
}, {
名称：“Vue 2”，
年龄:20,，
imageUrl:'s3.aws.amazon.com2'
}],
msg:“你好，Vuejs！”
},
方法：{
getData:function（）{
axios.get（）http://localhost:3000/getData')
.然后（函数（结果）{
this.infos=result.data
console.log（infos）
})
.catch（函数（err）{
console.log（错误）
})
}
}
})

{{msg}}
获取数据




名称：{{info.Name}}

年龄：{{info.Age}}

图像：{{info.imageUrl}}

在您的axios请求中，

此

未绑定到您的Vue实例

改为使用箭头函数来保持正确的上下文：

getData: function() {
  axios.get('http://localhost:3000/getData')
  .then(result => {
    this.infos = result.data
    console.log(this.infos)
  })
  .catch(err => {
    console.log(err)
  })
}

或者在请求之前设置一个

self

变量：

getData: function() {
  let self = this
  axios.get('http://localhost:3000/getData')
  .then(function(result) {
    self.infos = result.data
    console.log(self.infos)
  })
  .catch(function(err) {
    console.log(err)
  })
}

---

嘿，真管用！非常感谢。我有一个疑问，为什么我必须使用箭头函数而不是正常函数？我之所以使用function关键字，是因为当我在arrow函数中编写所有内容时，getData:不起作用，但当我编写函数时，它起作用了。我缺少或不知道的概念是什么？如果你想了解更多关于

这个

关键字及其使用上下文的信息，请解释原因和方法。