Vue.js Vuex State Change doesn't rerender a template with v-if

Question

I've tried having the v-if value set in computed, data, passed as props and just a direct reference to state but it NEVER re renders despite the fact that the state I check for is changed to true.

Currently I have it directly referencing the store

<template v-if="this.$store.state.showReviews">

I perform an AJAX Request in my Vuex Action

getBikeReviews(context, i){
  console.log("getBikeReviews");
  axios.get('http://mpaccione.com/wp-content/themes/webdev/projects/Web_Design_4/Creating_Online_Store/api/get_reviews.php?index='+i).then((res) => {
    context.commit('storeBikeReviews', {"index": i, "json": res.data});
    context.commit('showReviews', true);
  });
}

The State gets Mutated to true

showReviews (state, payload){
  console.log("showReviews");
  state.showReviews = payload;
}

However the template never re-renders.

Is showReviews initially declared in your vuex state? Vue cannot detect property additions. — Eric Guan
Yes it is initially declared in my state... const state = { bikes: [], reviews: [], showReviews: false, uploadProgress: [] } — Michael Paccione
You don't use this in template <template v-if="$store.state.showReviews"> — Morty Choi
I've made the change but I have the same outcome. I checked the store with {{ }} and it returns true but there is no re render. — Michael Paccione

Daniel Daniel · Accepted Answer · 2018-05-14T14:29:56

Have you tried using getters or computed values?

computed: {
  showReviews() {
    return this.$store.state.reviews || []
  },
  reviews() {
    return this.$store.state.showReviews === true
  }
}

also, it's a good idea to use Vue.$set whenever possible instead of simple assignment.

Import Vue from 'vue';

showReviews (state, payload){
  Vue.$set(state, 'showReviews', payload);
}

while this may not resolve the issue with some value types, IMHO, it's a good idea to just apply all the time, so you don't forget the one that does need it.

finally, if you're really struggling to get the reactivity to kick in, you can force a re-render by calling this.$forceUpdate(); (or Vue.$forceUpdate();) after your mutation

Vue.js Vuex State Change doesn't rerender a template with v-if

1 Answers