vue中进行axios遇到的问题

最新推荐文章于 2023-10-02 22:34:28 发布

沙漠蓝色披头

最新推荐文章于 2023-10-02 22:34:28 发布

阅读量427

点赞数

分类专栏：大前端文章标签： vue

本文链接：https://blog.csdn.net/u013075460/article/details/116993562

版权

大前端专栏收录该内容

19 篇文章 1 订阅

订阅专栏

错误如下：

NetData.vue?853e:26 Uncaught (in promise) TypeError: Cannot set property 'info' of undefined
at eval (NetData.vue?853e:26)

具体代码：

 data () {
    return {
      info: null
    }
  },

methods: {

    getData () {
      // eslint-disable-next-line no-undef
      console.log(this)
        var self = this
      this.axios.get('https://api.coindesk.com/v1/bpi/currentprice.json')
        .then(function (response) {
          console.log(this)
          self.info = response
          console.log(response)
        })
    }
  }

错误原因是：在then函数内部this为undefined，已经不是外面的vue实例，解决方法就是设置一个变量把this存起来

var self = this

后面的this.info变成self.info,之后就可以正常赋值了

另一种方式是使用箭头函数也可以实现上面的效果，就不需要另外定义一个变量了，更加简单