Question

距离开始学习VueJS大约还有一个小时的时间。我已经使用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);
  })
}

VueJS数据属性在安装的函数中返回未定义的

1 个答案: