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);
  })
}