$this.forceUpdate() does not re-render Page!

Hi guys,

I am new to Vue and I want to ask about forceUpdate() method. It just does not work, anywhere in my code (watch, methods, regular function). it seems like it is doing nothing.

I have this kind of a code in my component Watchers:

watch: {

  dateNtime: function(){

  this.$forceUpdate();

  },

},

so it should rerender the component when dateNtime value is changed, but it does not. I changed function with alrert or console.log and they both work!

It would be great if someone could help me

All depends on why you are using it and where.

Hard for us to know what you are doing simply by saying its not working… what is not updating / what should be updating / what you are expecting. Simply saying this is not working is like saying the car is broke, why?

Read this article perhaps might have some answers all the same.

https://michaelnthiessen.com/force-re-render/

import { mapActions } from “vuex”;
import {mapGetters} from ‘vuex’;

export default {

name: ‘AllGames’,

data(){

  return{
      games: [],
      gameId: '11886023',
      value: '',
      spinning: '',
      cookiesObject: '',

  }

},

async mounted(){

const res = someLINK + dateNtime (Fetch data with exact date I want)

const data = await res.json();

const games = data.matches;

const tournaments = {};

games.forEach((e) => {

    const tourid = e.tournament.id;

    if(typeof tournaments[tourid] === 'undefined') {

        tournaments[tourid] = [];

    }

    tournaments[tourid].push(e);

});



// this.games = games;

this.tournaments = tournaments;

},

methods:{

    ...mapActions(['setdateNtime']),

     },    

},  

components: {

},

computed: {
…mapGetters([‘dateNtime’]),
},

watch: {

  dateNtime: function(){

  this.$forceUpdate();

  },

},

}

So, this is the code, and when dateNtime updates, the link which I fetch from changes, but since it is in mounted function, i want it to rerender, so it will render from different API.

and I am also saying that the function $forceUpdate() just does not re-render any component anywhere in my code. should not it just re-render component when I call it? is it depended on some circumstances?
I tried vm.$forceUpdate() too, but same

Also, I have seen the article you linked and tried every case as it said but I failed

Sorry man still not following why you want to re-render the component when data is updated?

You set a variable in your data and when that changes it will update the Vue values automatically… if data comes back with new values and you say on response this.value = response.newValue thats it… it will do all the magic for you.

You should not need to force you data to update, it should do it automatically once that value is changed.

PS / Save some typing

import { mapActions } from “vuex”;
import {mapGetters} from ‘vuex’;

=

import { mapActions, mapGetters } from “vuex”;

:slight_smile:

So, because yes, It(dateNtime) has a new value but im using that value in fetch API link in the hook mounted. So, dateNtime itself changes, but I need to re-render component so it will mount with new Value. for example when I go to the different page and comeback, it renders with new dateNtime.

Also, the question was about forceupdate, yes I red that mostly it is wrong and I dont need to forceupdate things, but anyway it is just not working as well as $nexttick and etc…

And thanks for PS!

thanks for wasting your time, for me

What is entailed in that? From your Vuex?

No worries, just trying to follow along, everyone has different situations so its sometimes hard to understand what they trying to do simply based on looking at code but all good no worries, you will get it sorted out…people here to help :slight_smile:

const games = data.matches;

You don’t have “matches” that in your data and what is “data” ?

Yes, thats from vuex to set dateNtime and after it sets I receive a new value of it in my component. this new value is pasted in API link to fetch but it does not re-render, because it is in mounted function which only runs 1 time (when comp is mounted).

its an array I receive from API call which has object matches in it, so i save that object right away

Can you show that snip of the API call and the response?

computed:{
dateNtime: {
      get() {
        return this.$store.getters['someStore/getDateNtime']
      },
      set(value) {
        this.$store.commit('someStore/setDateNtime, value)
      }
    },
}

if your setting the values to Vuex you need to get the values from there, no need to watch once store is updated it will be everywhere


so this is Json file I receive with object matches


and this is regular fetch funq

Ok im just trying to follow along, so you get that JSON response from server on mounted with API call or how?

and that fetch function is in mounted() so it does not rerun but I need to because my variable is in that link which will fetch new different array depending on date

ok now i follow you… give me a second to think, the dateNtime in the url is the var you need to be dynamic kind of thing? correct…

yes and it is dynamic. it changes but now I need to re-render whole thing, so it will paste in new array. like I said when I go to the different page and come back mounted() is fired again, and it has new value. So, i thought that after update of that variable , ill just re-render component and everything would be fine. but $forceUpdate() function does not work

Im lost to where the change come from? what changes the dateNTime? what triggers it? What is original value

well if you leave and come back Vue will lose all saved values, you would need to store in Vuex (i think your doing) and put those values back into the url so you never lose that state between page changes…

I never used forceUpdate but there has to be something to update…