今天开始用mock.js和Vue前端进行交互了,然后获取到json数据之后赋值一直失败,困扰了自己好几个小时

   clickHandler(e){
     var that = this;
     this.$axios.get("/news")
     .then(res{
       console.log(res.data);
       let data_ = JSON.stringify(res.data,  null, 4);
       //去除mock对象的数据列表
       this.items = res.data.list;
       console.log(this.items)
     })
     .catch(err=>{
       console.log(err)
     })
     this.isShow=true;
     console.log(this.items)
   }

我在获取到json数据后是这样处理的,然后item数组一直是空的,
在这里插入图片描述
无论我如何改变值。其实奥秘在这里

            .then(function(res){
              let data_ = JSON.stringify(res.data,  null, 4);
              //去除mock对象的数据列表
              this.items = res.data.list;
            })

注意此时的this是什么?是你的Vue对象吗?还是axios对象?在这里调用this.items只会给当前对象赋值,并不会给你的Vue对象的数据赋值,我们有两种解决方案:

  • 使用=>
    .then(res=>{
      let data_ = JSON.stringify(res.data,  null, 4);
      //去除mock对象的数据列表
      this.items = res.data.list;
    })
  • 在函数开始前记录this指针
   var that = this;
   this.$axios.get("/news")
   .then(res=>{
     let data_ = JSON.stringify(res.data,  null, 4);
     //去除mock对象的数据列表
     that.items = res.data.list;
   })

数据成功显示
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐