Search code examples
vue.jsvuexgetter

Vue getter property undefined

i have state pages obtained from api

const state = () => ({
  info: [],
  pages: []
})

and Getter

const getters = {
  // HomePage_Getters
  HomeAdvantages(state) {
    return state.pages.find((page) => (page.template = 'home')).home_advantages
  }
}

On the vue Page 

        <div>
          {{ HomeAdvantages }}
        </div>
...
  computed: {
    ...mapGetters({ HomeAdvantages: 'modules/general/HomeAdvantages' })
  },

On Page refresh i get

Cannot read property 'home_advantages' of undefined

But in the state pages property is present

How i could solve this?

I will be grateful, for help

Solution

  • If pages property is empty, then state.pages.find((page) => (page.template = 'home')) may return undefined. And in your code you want to get home_advantages from the find result. Your code should look like this:

    var page = state.pages.find((page) => (page.template == 'home'));
if (!page) {
   return null;
}
return page.home_advantages