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

The reason given: You can not use an instance of this Vue inside then, because not bound within this.

before fixing

<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>

Review Methods: ES6 function arrows, arrows methods shared variables and methods parent

Modified

<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>

problem solved