vue this is undefined

未来可期MXH

于 2020-12-13 11:40:18 发布

阅读量475

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： java html es6

本文链接：https://blog.youkuaiyun.com/qflyIT/article/details/111093038

vue 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个在使用axios过程中常见的问题，即在Vue中由于this指向问题导致的数据无法正常更新，并提供了解决方案——使用箭头函数来保持正确的上下文。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用axios经常会出现这个问题

如下面代码

data(){
  return{
    goods:{
      title:null,
      subTitle:null,
      originalCost:null,
      currentPrice:null,
      discount:null,
      isFreeDelivery:null
    }
  }
},

  mounted:function()
  {//this is undefined
    axios.get("http://localhost:8081/get/goods/749").then(function (response){
      console.log(response);
      var _this = this;
      _this.goods = response.data;
    });

修改后：只需要将function换成=> 箭头函数就可以了

mounted:function()
  {
    axios.get("http://localhost:8081/get/goods/749").then((response)=>{
      console.log(response);
      var _this = this;
      _this.goods = response.data;
    });