Array is undefined from Veux Store

Question

I am retrieving data from the Vuex Store. I first of all want to check of the array is present in the Vuex Store, after that I want to check if the noProducts object at index 0 is not present.

The reason for this is that tweakwiseSortedProducts is used for both products and a no Products boolean to react to in the front-end

tweakwiseHasProducts () {
  if (this.$store.state.tweakwise?.tweakwiseSortedProducts) {
    return (
      this.$store.state.tweakwise.tweakwiseSortedProducts[0].noProducts ===
      false
    );
  }
  return false;
},

My front-end currently, often, returns:

this.$store.state.tweakwise.tweakwiseSortedProducts[0] is undefined

In the console.

Answer 1

This happens because tweakwiseSortedProducts is not undified but an empty list. You can try:

tweakwiseHasProducts () {
  if (this.$store.state.tweakwise?.tweakwiseSortedProducts?.length !== 0) {
    return (
      this.$store.state.tweakwise.tweakwiseSortedProducts[0].noProducts ===
      false
    );
  }
  return false;
},

or just:

tweakwiseHasProducts () {
  return this.$store.state.tweakwise?.tweakwiseSortedProducts[0]?.noProducts === false;
},

which will be false if any of this elements is undefined, or true if noProducts is really false