[Vuejs]-Vuex store update but DOM is not

by

1👍

✅

Wow, the answer surprises me. Its basically that if you have an array of objects in your Vuex store, you should NOT use getters / setters if you ALSO are stepping over that array in a v-for instead you can just get / set the values directly.

For example. If you do this:

<v-row
  v-for="(cred, index) in myVuexStoreArrayOfObjects"
  :key="index"
>

Then you should do this for your v-model

  <v-text-field
    v-model="cred.value"
  ></v-text-field>

So that finally you can remove an object from that array and maintain your reactivity. Like so:

removeObjectFromMyVuexStoreArray(index) {
  this.myVuexStoreArrayOfObjects.splice(index, 1)
},

And there is no need to get/set. In fact if you get/set you will NOT be able to remove an item and remain reactive.

👤ToddT

3👍

You should dispatch an action that remove that item :

   sellerId: {
      get() {
        return this.returnAmazonCredentials.merchant_id
      },
      set(value) {
        this.$store.dispatch('removeCredential',this.credIndex)
      }
    },

store :

  mutations: {
    REMOVE_CREDENTIAL (state,index) {
      state.amazonCredentials.splice(index, 1)
    }
  },
  actions: {
    removeCredential(context,index) {
      context.commit('REMOVE_CREDENTIAL',index)
    }
👤Boussadjra Brahim

Leave a comment