VM3652 HelloWorld.vue:32 Uncaught (in promise) TypeError: Cannot set property 'heros' of undefined

报错原因： 在 then的内部不能使用Vue的实例化的this, 因为在内部 this 没有被绑定。

修改前

<template>
  <div>
    <home-header></home-header>
    <home-content :heros="heros"></home-content>
  </div>
</template>

<script>
import HomeHeader from './components/Header'
import HomeContent from './components/Content'
import axios from 'axios'
export default {
  name: 'HelloWorld',
  components: {
    HomeHeader,
    HomeContent
  },
  data () {
    return {
      heros: {}
    }
  },
  methods: {
    getHomeInfo(){
      axios.get("api/lol/hero/all")
        .then(function(response){
          this.heros = response.data
        })
    }
  },
  mounted (){
    this.getHomeInfo()
  }
}
</script>

<style lang="stylus" type="text/stylus" scoped>

</style>

修改方法：用ES6箭头函数，箭头方法可以和父方法共享变量

修改后

<template>
  <div>
    <home-header></home-header>
    <home-content :heros="heros"></home-content>
  </div>
</template>

<script>
import HomeHeader from './components/Header'
import HomeContent from './components/Content'
import axios from 'axios'
export default {
  name: 'HelloWorld',
  components: {
    HomeHeader,
    HomeContent
  },
  data () {
    return {
      heros: {}
    }
  },
  methods: {
    getHomeInfo(){
      axios.get("api/lol/hero/all")
        .then((response) =>{
          this.heros = response.data
        })
    }
  },
  mounted (){
    this.getHomeInfo()
  }
}
</script>

<style lang="stylus" type="text/stylus" scoped>

</style>

问题解决