CODEWITHSUNDEEP
javascriptvue.jsnuxt.jsvuex
Lisa
Lisa

Reputation: 125

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

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?

Upvotes: 1

Views: 708

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

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 */
   }  
},
};

Upvotes: 2

Related Questions