Can't access getters in the store for Vue when in a template because it "is not a function"

user_17195241 0
Viewed 258

I'm new to vue and vuex and I'm also using Nuxt. I want to use a function in my template that searches for some data that I fetched from an API (in vuex). I can't figute out why I always get

state.allHandhelds.values.findIndex is not a function

My template is like this:

<div>{{ handheldID("Form Factor") }}</div>

And in my computed I call the function like this:

 computed: {
    ...mapGetters(["allHandhelds"]),
    handheldID(merkmal) {
      return this.$store.getters.indexFinder(merkmal);
    },
  },

In vuex I have it defined as a getter:

export const getters = {
   indexFinder(state, merkmal) {
    return state.allHandhelds.values.findIndex(
      (el) => el === merkmal
    ); /* Index des Merkmals finden */
  },
};

Any idea where I'm going wrong with that?

nuxt.js vuex vue.js javascript
1 Answers

You've to use the method access style like :

export const getters = {

 indexFinder: (state) => (merkmal) => {
      return state.allHandhelds.values.findIndex(
         (el) => el === merkmal
    ); 
  }
};

or with syntax :

export const getters = {
   indexFinder(state) {
    return (merkmal)=> {
       return state.allHandhelds.values.findIndex(
      (el) => el === merkmal
    ); /* Index des Merkmals finden */
   }  
},
};
user_81728570
Related