[Vuejs]-How do I trigger a recalculation in a Vue app?

by

0👍

Try changing return this.watches[this.event.id] === true;

to

return this.$store.commit("addWatch", this.event.id);

0👍

The code you have shown is correct, so the problem must be elsewhere.

I assume by ‘calculated method’ you mean computed property.
Computed properties do not watch their dependencies deeply, but you are updating the store immutably, so that is not the problem.

Here is a bit of sample code to give you the full picture.
Add event numbers until you hit ‘2’, and the isWatched property becomes true.

Vue.use(Vuex);
const mapState = Vuex.mapState;

const store = new Vuex.Store({
  state: {
    watches: {}
  },
  mutations: {
    addWatch(state, event) {
      state.watches = { ...state.watches, [event]: true };
    }
  }
});

new Vue({
  el: "#app",
  store,
  data: {
    numberInput: 0,
    event: { id: 2 }
  },
  methods: {
    addNumber(numberInput) {
      this.$store.commit("addWatch", Number(numberInput));
    }
  },
  computed: {
    ...mapState(["watches"]),
    isWatched() {
      if (!this.watches) return false;
      return this.watches[this.event.id] === true;
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.1.0/vuex.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div>Watches: {{ watches }}</div>
  <div>isWatched: {{ isWatched }}</div>
  <br>
  <input v-model="numberInput" type="number" />
  <button @click="addNumber(numberInput)">
   Add new event
  </button>
</div>

Leave a comment