zhwillwin
2017-08-02 09:42
采纳率: 0%
浏览 6.9k

vue使用axios获取接口数据如何封装?

我是一个刚用vue的小菜鸟,使用axios请求接口,想将获取的数据封装到页面上的dataList属性里,可是页面报错了

import MD5 from '../assets/js/MD5Util.js';

export default {
  name: 'awardVue',
    data () {
        return {
          dataList:[],
          str:""
        }
    },
  mounted :function(){
      this.getData();
     },

    methods:{

      getData(){
        const  param=MD5.getPkey(1,10);
        this.$http.get('apis/school/grasslandTransfer/winningStatisticsList', { params:{
          startNum: '1',
          endNum: '10',
          version: param.version,
          platformSource: param.platformSource,
          time: param.time,
          ltime: param.ltime,
          pkey: param.pkey
        } })
          .then(function (response) {
            console.log(response.data);
            this.dataList=response.data.winningStatisticsList;
          })
          .catch(function (error) {
            console.log(error);
          });
      }
    }
}

    这是返回的结果
    Object {msg: "查询成功", code: "1", winningStatisticsList: Array(10)}

award.vue?e9e3:51 TypeError: Cannot set property 'dataList' of undefined
at eval (award.vue?e9e3:48)
at

    可是response.data明明是有数据的啊,json格式,为什么会显示为undefined呢?
  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • JesusAllen30 2017-08-02 10:18
     因为 this 指向已经改变,你需要在函数中定义一个局部的 let _this = this;  然后都使用 _this.dataList 这样子
    
    评论
    解决 3 无用
    打赏 举报
  • Q544471255 2017-08-02 13:04
    let that = this;
      this.$http.get('apis/school/grasslandTransfer/winningStatisticsList', { params:{
              startNum: '1',
              endNum: '10',
              version: param.version,
              platformSource: param.platformSource,
              time: param.time,
              ltime: param.ltime,
              pkey: param.pkey
            } })
              .then(function (response) {
                console.log(response.data);
                            // 修改.
                that.dataList=response.data.winningStatisticsList;
              })
              .catch(function (error) {
                console.log(error);
              });
    

    这样就可以了.

    评论
    解决 3 无用
    打赏 举报

相关推荐 更多相似问题