javascript - VueJS 数据属性在已安装函数中返回未定义

Question

我使用 Axios 发出了一个 get 请求，该请求按预期返回一些数据，但我无法在已安装的函数中访问应用程序的数据属性来分配请求的结果。 this.productList 的控制台日志返回 undefined。谁能指出我正确的方向？

new Vue({
    el: '#products',
    data: function(){
        return{
            test: 'Hello',
            productList: null
        }
    },
    mounted: function(){
        axios.get('https://api.coindesk.com/v1/bpi/currentprice.json').then(function(response){
            console.log(response.data);
            console.log(this.productList)
        }).catch(function(error){
            console.log(error);
        })
    }
    
})

Answer 1

因为在该函数中，this 并不引用您的 vue 实例。它还有另外一层含义。

您可以创建一个临时变量来保存外部函数中 this 的值，如下所示:

mounted: function() {

  let $vm = this;

  axios.get('https://api.coindesk.com/v1/bpi/currentprice.json').then(function(response) {
    console.log(response.data);
    console.log($vm.productList)
  }).catch(function(error) {
    console.log(error);
  })
}

或者您可以使用更好的箭头功能:

mounted: function() {

  axios.get('https://api.coindesk.com/v1/bpi/currentprice.json').then((response) => {
    console.log(response.data);
    console.log(this.productList)
  }).catch(function(error) {
    console.log(error);
  })
}