[Vuejs]-Watch a class getter in Vue.js

0👍

this worked for me

<ion-grid :key="ikey">

</ion-grid>

data() {
   return {
       ikey: 0,
       //....
   };
},

watch: {
   recschanged: function () {
      this.ikey++;
   },
   
computed: {
   recschanged() {
      return this.$store.getters.getAkinRecsAdder;
   },   
   
 
STORE.js
-----------------
getters: {
   getAkinRecsAdder: (state) => {
      return state.akinRecsAdder;
   },


mutations: {   
   mut_akinRecsAdder(state, aval) {
      state.akinRecsAdder = state.akinRecsAdder + aval;
   },
   
actions: {   
   setAkinRecsAdder({ commit }, aval) {
      commit('mut_akinRecsAdder', aval);
   },

The logic behind this is:
In store’s state there is the variable akinRecsAdder
Every time the lenth of the records changed you
have to change that value.

In the component a computed property computes that value
The watch, watches this computed value and when "Fires"
increment the local data => ikey++
The ikey must be the key at <ion-grid :key="ikey">
and when changed forces rendering the component

Leave a comment