代码之家 › 专栏 › 技术社区 › Chris Wickham

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

axios vuejs2 vue.js javascript

Chris Wickham · 技术社区 · 7 年前

我还有一个小时就要开始学VueJS了。我使用Axios发出了一个get请求,它按预期返回了一些数据,但是我无法在mounted函数中访问应用程序的数据属性来分配请求的结果。控制台登录到 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);
    })
}

})

1 回复 | 直到 7 年前

Phiter 7 年前

因为在那个函数中, 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);
  })
}

推荐文章

Bagas Rizkiyanto · 设置类型错误,尝试捕获类型脚本,但error.message除外

9 月前

Gate Study · React自定义钩子问题

9 月前

Souvik De · 无法使用auth0的access_token获取用户信息

10 月前

masoud khanlo · axios实例的React useState问题

10 月前

Pirathikaran · Axios拦截器为uuid自定义标头

1 年前

molLbach · 向Spring后端发送axios post请求时出现400错误

1 年前

pareshaann · 由于useEffect钩子,在react中无限重渲染

1 年前

Rhys Swansbra · API响应未在页面中呈现:在Proxy.created未定义天气

1 年前

Asrin Utku · Axios头获取,无法调用可能为“null”或“undefined”的对象。ts(2723)

1 年前

pomoworko.com · 如何在Node.js中使用Axios解决PayPal Webhook 401未经授权的错误?

1 年前