vue v-for does not update when vuex getter returns a new array

Question

I am trying to create a reactive array that is displayed to the screen using a v-for. The array is stored in a vuex state array and is retrieved by the vue component using a vuex getter. Inside a component, I can send a store commit to remove one of the day's inside of the array. The result should be an array with a size one smaller than before.

Removing an element from the array works fine and when I console.log the array in the vue component responsible for getting the array from the store, I can see that the correct array is returned, however, for some reason only the length of the v-for loop is updated and not data within the v-for loop. For example, the array in question is an array of strings which represents dates. What gets displayed on the screen is all of the dates minus the last date in the original array (after the mutation) where as the array in my state and in the console log shows the correct date missing.

Below is what I have for my code

VUEX Store:

const state = {
   activeDays: []
}

const getters = {
   getActiveDays: function (state) {
      return state.activeDays;
   }
}

const mutations = {
   removeDayFromActiveDays: function( state, day ) {
      const index = state.activeDays.indexOf(day);
      state.activeDays.splice(index, 1);
   }
}

Vue component:

<template>
   <div>
      <div v-for="day in activeDays">{{ day }}</div>
   </div>
</template>
<script>
//...
computed: {
   activeDays: function() {
      if (!this.$store.getters['getActiveDays']) {
         return null;
      }
      console.log("Active Days: " this.$store.getters['getActiveDays'])
      return this.$store.getters['getActiveDays']
   }
}
</script>

The v-for needs a [key](https://vuejs.org/api/built-in-special-attributes.html#key) so Vue can properly diff changes to the list. The key should be a unique property of `day`. If day is always a unique string then the key can be `day` itself, e.g. `:key="day"` — yoduh, Aug 21 '23 at 14:39
@LakShan you missed adding `:key` there, but regardless, using index is the wrong move. See [this post](https://stackoverflow.com/questions/44531510) that clarifies why — yoduh, Aug 21 '23 at 15:32
@LakShan is right. If each of your array objects contain a unique key, please use as your :key, rather than using index. — eYinka, Aug 21 '23 at 16:38

score 2 · Accepted Answer · answered Aug 21 '23 at 20:44

2

const mutations = {
  removeDayFromActiveDays: function(state, day) {
    state.activeDays = state.activeDays.filter(existingDay => existingDay !== day);
  }
};

<template>
  <div>
    <div v-for="day in activeDays" :key="day">{{ day }}</div>
  </div>
</template>
<script>
export default {
  computed: {
    activeDays: function() {
      return this.$store.getters['getActiveDays'] || [];
    }
  }
};
</script>

Can you try the code like this as well?

answered Aug 21 '23 at 20:44

Abdullah Eray Bulut

36
1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 24 '23 at 12:30

vue v-for does not update when vuex getter returns a new array

1 Answers1