1

The problem:

I'm creating a component in my nuxt/vue app. In my vuex store i fetch data ("allHandhelds") from an API and add it to an array. In my component I have a method that is supposed to find some data by index. When I display "allHandhelds" everything works fine. but when I add:

".findIndex((el) => el === "Form Factor");

it only works once correctly and then on every page reload I get a "Cannot read property 'findIndex' of undefined". It only works again if I remove the findIndex, reload and add it afterwards again (And then it only works one time again).

This is my vuex store:

export const state = () => ({
  allHandhelds: [],
});

export const mutations = {
  setHandhelds(state, allHandhelds) {
    state.allHandhelds = allHandhelds;
  },
};

export const actions = {
  fetchAllHandhelds(context) {
    return fetch(
      "URLHERE"
    )
      .then((response) => response.json())
      .then((data) => {
        context.commit("setHandhelds", data);
      })
      .catch((err) => console.error(err));
  },
};

This is my template:

<template>
  <div id="homepage">
        <div>{{ handheldID2() }}</div>
     </div>
</template>

And this is my script including the method and how I import the data from vuex:

<script>
import { mapActions, mapGetters } from "vuex";

export default {
  data() {
    return {};
  },

  computed: {
    ...mapGetters(["allHandhelds"]),
  },

  created() {
    this.fetchAllHandhelds();
  },

  methods: {
    ...mapActions(["fetchAllHandhelds"]),
    handheldID2() {
      return this.allHandhelds.values[0].findIndex(
        (el) => el === "Form Factor"
      );
    },
  },
};
</script>

My thoughts:

It seems like I'm storing the data not correctly. After a page refresh the Method doesn't seem to have access to the right data anymore.

Lisa
  • 115
  • 11
  • 2
    When your state is initially created, `allHandhelds` is an empty array, `[]`. This means that `allHandhelds.values[0]` will not be defined since there is no element zero yet. To better understand the problem, try temporarily replacing your fetch call with an async operation that never completes, such as `new Promise(() => undefined)`. You need to handle the separate case when `allHandhelds` doesn't have data in it yet. – Etheryte Dec 14 '21 at 15:48
  • Thank you. I did get it to work with a loading state described here: https://stackoverflow.com/a/55067255/17195241 Now I just have fo figure it out how I can get a loading state to work with a action in vuex. So far I only managed to get it done with a fetch in a component. – Lisa Dec 14 '21 at 16:29
  • 1
    This **really** looks like another question [asked today](https://stackoverflow.com/questions/70350195/nuxt-page-html-is-loaded-before-data#comment124357866_70350195). I'd basically can say the exact same thing in this case too (we can benefit from the fact that we're using Nuxt here!). – kissu Dec 14 '21 at 17:01
  • Changing the fetch to async await made it work for me with the solution you posted earlier (testing if the value has a length with .length) Thanks! – Lisa Dec 14 '21 at 17:31

0 Answers0