vue2.0 axios 获取数据报错

Question

数据无法加载，报错怎么解决？求大神解答

<template>
  <div class="recommend">
    <div class="recommend-content">
      <scroll ref="scroll" class="recommend-content">
        <div>
          <div v-if="recommends.length" class="slider-wrapper" ref="sliderWrapper">
            <slider>
              <div v-for="item in recommends">
                <a :href="item.mien_img">
                  <img class="needsclick" @load="loadImage" :src="item.mien_img">
                </a>
              </div>
            </slider>
          </div>
        </div>
      </scroll>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import Slider from 'base/slider/slider'
  import Scroll from 'base/scroll/scroll'
  import axios from 'axios'
  import qs from 'qs'
  const ERR_OK = 200
  export default {
    data() {
      return {
        recommends: []
      }
    },
    created() {
      this.getRecommend()
    },
    methods: {
      getRecommend() {
        var token = JSON.parse(localStorage.token)
        axios.post(url, qs.stringify({
          token: token
        })).then(function(res) {
          console.log(res)
          if (res.status === ERR_OK) {
          this.recommends =res.data.data
          }
        })
      }
    },
    components: {
      Slider,
      Scroll
    }
  }
</script>

Answer 1

this.recommends中的this已经不是vue实例了。

getRecommend(){
    let _self = this;
    
    ...
    ...
    ...
    
    _self.recommends = res.data.data
}

Answer 2

在created里面 this.这个方法以及数据是未定义的 你可以在数据加载完成钩子函数里使用 不然它是未定义的

Answer 3

把then里面的函数写成闭包形式 () => {}，this就还是原来的vue实例。

Answer 4

this的指向问题。

if (res.status === ERR_OK) {
    console.log(this)  // 查看控制台看看this是什么
  this.recommends =res.data.data
}

解决方案,使用箭头函数

 axios.post(url, qs.stringify({
  token: token
})).then((res) => {
  console.log(res)
  if (res.status === ERR_OK) {
      this.recommends = res.data.data
  }
})

Answer 5

this指向问题，一楼回答很标准了。