Vuex getter reactivity issue (in combination with Vue router)

Question

I have a Vuex getter that is supposed to get all relevant data for the current route & then display it in Vuetify <v-data-table> which works completely fine when the component is created. However, when i create a new entry in the data Array in the relevant state that the getter works with, it only fetches & displays the new entry when i navigate away from the current route. I'm using the current route as a key to identify the different entries in the state so i can display different information for the current route, hence the Vue router. I'm not sure if explained my issue clearly (sorry, English is not my first language), so here's code that i think is relevant: The getter in question:

  computed: {
    ...mapGetters({
      geData: "geData"
    }),
    getAllData() {
      return this.geData[this.$route.path];
    }
  }

The data table:

<v-data-table :headers="headers" :items="getAllData" hide-actions>
  <template v-slot:items="props">
        <td class="text-xs-left">{{ props.item.name }}</td>
        <td class="text-xs-left">{{ props.item.state}}</td>
        <td class="text-xs-left">{{ props.item.created_at }}</td>
        <td class="text-xs-left">{{ }}</td>
      </template>
</v-data-table>

Here's how i modify the array in the store mutation:

  setNewData: (state, Data) => {
    state.Data[Data[0]] = Data[1];
  }

The first Data[0] is the route to be used as a key, the second Data[1] is the new data. I suspect the reason the getter updates only when i navigate away from the current route is because i use the route as a key, but i'm not certain and i dont know if that's the case how to adress the issue, so any ideas, pointers are welcome, thanks in advance!

How are you modifying the array? Sounds like it could be a reactivity issue. vuejs.org/v2/guide/list.html#Caveats — skirtle
– skirtle, Commented Sep 26, 2019 at 20:42
@skirtle Hello sir, i added a brief explanation how i'm modifying the array with some code, if it's not too much trouble can you look again? — Y.Futekov
– Y.Futekov, Commented Sep 26, 2019 at 20:46

Ohgodwhy · Accepted Answer · 2019-09-26 20:52:03Z

1

You'll need to use Vue.set because object keys are not reactive unless first declared:

Vue.set(state.Data, Data[0], Data[1])

That should get you the reactivity you're looking for.

Side note:

Make sure that state.Data is reactive to begin with by initializing it as an object.

answered Sep 26, 2019 at 20:52

Ohgodwhy

50.8k11 gold badges86 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Y.Futekov Over a year ago

Sir, thank you very much! I did as you suggested (changed state.Data to an object) and then used Vue.set(state.Data, Data[0], Data[1]) and it worked!

tony19 · Accepted Answer · 2022-07-15 04:38:15Z

1

Try this:

setNewData: (state, Data) => {
  Vue.set(state.Data, Data[0], Data[1])
}

You'll need to import Vue if you don't already have it in that file.

See https://v2.vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats.

I'm assuming here that you're adding a new property to the object. If the property already exists then you wouldn't need Vue.set.

An alternative would be to copy the object, adding the new property before the new object is made reactive:

setNewData: (state, Data) => {
  state.Data = {
    ...state.Data,
    [Data[0]]: Data[1]
  }
}

edited Jul 15, 2022 at 4:38

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Sep 26, 2019 at 20:52

skirtle

29.3k4 gold badges49 silver badges63 bronze badges

Collectives™ on Stack Overflow

Vuex getter reactivity issue (in combination with Vue router)

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related