Can you force Vue js to reload re-render

Question

Just a quick question    Can you force Vue js to reload recalculate everything  If so  how

User · Answer

I had this issue with an image gallery that I wanted to rerender due to changes made on a different tab. So tab1 = imageGallery, tab2 = favoriteImages

tab @change="updateGallery()" -> this forces my v-for directive to process the filteredImages function every time I switch tabs.

<script>
export default {
  data() {
    return {
      currentTab: 0,
      tab: null,
      colorFilter: "",
      colors: ["None", "Beige", "Black"], 
      items: ["Image Gallery", "Favorite Images"]
    };
  },
  methods: {
    filteredImages: function() {
      return this.$store.getters.getImageDatabase.filter(img => {
        if (img.color.match(this.colorFilter)) return true;
      });
    },
    updateGallery: async function() {
      // instance is responsive to changes
      // change is made and forces filteredImages to do its thing
      // async await forces the browser to slow down and allows changes to take effect
      await this.$nextTick(function() {
        this.colorFilter = "Black";
      });

      await this.$nextTick(function() {
        // Doesnt hurt to zero out filters on change
        this.colorFilter = "";
      });
    }
  }
};
</script>

User · Answer

This has worked for me   created                 EventBus  on  refresh-stores-list        gt                    this  forceUpdate                                 The other component fires the refresh-stores-list event will cause the current component to rerender

User · Answer

This seems like a pretty clean solution from matthiasg on this issue      you can also use  key  someVariableUnderYourControl  and change the key when you want to component to be completely rebuilt   For my use case  I was feeding a Vuex getter into a component as a prop  Somehow Vuex would fetch the data but the reactivity wouldn t reliably kick in to rerender the component  In my case  setting the component key to some attribute on the prop guaranteed a refresh when the getters  and the attribute  finally resolved

User · Answer

Use vm  set  varName   value   Look for details into Change Detection Caveats

User · Answer

using v-if directive    lt div v-if  trulyvalue  gt       lt component-here   gt    lt  div gt    So simply by changing the value of trulyvalue from false to true will cause the component between the div to rerender again

User · Answer

Why      do you need to force an update   Perhaps you are not exploring Vue at its best      To have Vue automatically react to value changes  the objects must be initially declared in data  Or  if not  they must be added using Vue set      See comments in the demo below  Or open the same demo in a JSFiddle here    x000D   x000D  new Vue   x000D    el    app   x000D    data    x000D      person    x000D        name   Edson  x000D        x000D       x000D    methods    x000D      changeName     x000D           because name is declared in data  whenever it x000D           changes  Vue automatically updates x000D        this person name    Arantes   x000D         x000D      changeNickname     x000D           because nickname is NOT declared in data  when it x000D           changes  Vue will NOT automatically update x000D        this person nickname    Pele   x000D           although if anything else updates  this change will be seen x000D         x000D      changeNicknameProperly     x000D           when some property is NOT INITIALLY declared in data  the correct way x000D           to add it is using Vue set or this  set x000D        Vue set this person   address    123th avenue     x000D         x000D           subsequent changes can be done directly now and it will auto update x000D        this person address    345th avenue    x000D        x000D      x000D     x000D     CSS just for the demo  it is not necessary at all     x000D  span nth-of-type 1  button nth-of-type 1    color  blue    x000D  span nth-of-type 2  button nth-of-type 2    color  red    x000D  span nth-of-type 3  button nth-of-type 3    color  green    x000D  span   font-family  monospace   x000D   lt script src  https   unpkg com vue  gt  lt  script gt  x000D   x000D   lt div id  app  gt  x000D     lt span gt person name     person name    lt  span gt  lt br gt  x000D     lt span gt person nickname     person nickname    lt  span gt  lt br gt  x000D     lt span gt person address     person address    lt  span gt  lt br gt  x000D     lt br gt  x000D     lt button  click  changeName  gt this person name    Arantes    will auto update because  name  was in  data   lt  button gt  lt br gt  x000D     lt button  click  changeNickname  gt this person nickname    Pele    will NOT auto update because  nickname  was not in  data   lt  button gt  lt br gt  x000D     lt button  click  changeNicknameProperly  gt Vue set this person   address    99th st      WILL auto update even though  address  was not in  data   lt  button gt  x000D     lt br gt  x000D     lt br gt  x000D    For more info  read the comments in the code  Or check the docs on  lt b gt Reactivity lt  b gt   link below   x000D   lt  div gt  x000D   x000D   x000D    To master this part of Vue  check the Official Docs on Reactivity - Change Detection Caveats  It is a must read

User · Answer

So there s two way you can do this   1   You can use  forceUpdate   inside your method handler i e   lt your-component  click  reRender    gt  lt  your-component gt    lt script gt  export default      methods         reRender            this  forceUpdate                  lt  script gt    2   You can give a  key attribute to your component and increament when want to rerender   lt your-component  key  index   click  reRender    gt  lt  your-component gt    lt script gt  export default      data          return           index  1                 methods         reRender            this index                  lt  script gt

User · Answer

Try to use this  router go 0   to manually reload the current page

User · Answer

Try this magic spell   vm  forceUpdate      No need to create any hanging vars      Update  I found this solution when I only started working with VueJS  However further exploration proved this approach as a crutch  As far as I recall  in a while I got rid of it simply putting all the properties that failed to refresh automatically  mostly nested ones  into computed properties    More info here  https   vuejs org v2 guide computed html

User · Answer

Worked for me      data              return               userInfo  null              offers  null                       watch              route                  this userInfo   null             this offers   null             this loadUserInfo               this getUserOffers

User · Answer

In order to reload re-render refresh component  stop the long codings  There is a Vue JS way of doing that   Just use  key attribute   For example     lt my-component  key  unique    gt    I am using that one in BS Vue Table Slot  Telling that I will do something for this component so make it unique

User · Answer

Sure    you can simply use the key attribute to force re-render  recreation  at any time    lt mycomponent  key  somevalueunderyourcontrol  gt  lt  mycomponent gt   See https   jsfiddle net mgoetzke epqy1xgf  for an example  It was also discussed here  https   github com vuejs Discussion issues 356 issuecomment-336060875

User · Answer

lt router-view  key  quot  route params slug quot    gt   just use key with your any params its auto reload children

User · Answer

The approach of adding  key to the vue-router lib s router-view component cause s fickers for me  so I went vue-router s  in-component guard  to intercept updates and refresh the entire page accordingly when there s an update of the path on the same route  as  router go   router push   router replace weren t any help   The only caveat with this is that we re for a second breaking the singe-page app behavior  by refreshing the page    beforeRouteUpdate to  from  next        if  to path     from path          window location   to path

User · Answer

sorry guys  except page reload method flickering   none of them works for me   key didn t worked    and i found this method from old vue js forum which is works for me   https   github com vuejs Discussion issues 356   lt template gt       lt div v-if  show  gt          lt button  click  rerender  gt re-render lt  button gt       lt  div gt   lt  template gt   lt script gt      export default           data                return  show true                     methods               rerender                    this show   false                 this  nextTick      gt                        this show   true                     console log  re-render start                       this  nextTick      gt                            console log  re-render end                                                                            lt  script gt

User · Answer

just add this code   this  forceUpdate     GoodLuck

User · Answer

I found a way  It s a bit hacky but works   vm  set  x  0   vm  delete  x      Where vm is your view-model object  and x is a non-existent variable    Vue js will complain about this in the console log but it does trigger a refresh for all data  Tested with version 1 0 26

User · Answer

lt my-component  key  uniqueKey    gt    along with it use this  set obj  obj key  value  and update uniqueKey for every update in object  obj  value  for every update this uniqueKey    it worked for me this way

User · Answer

Please read this http   michaelnthiessen com force-re-render   The horrible way  reloading the entire page  The terrible way  using the v-if hack  The better way  using Vue   s built-in forceUpdate method  The best way  key-changing on your component    lt template gt      lt component-to-re-render  key  quot componentKey quot    gt   lt  template gt    lt script gt   export default     data         return         componentKey  0                methods        forceRerender           this componentKey    1                  lt  script gt   I also use watch  in some situations

[javascript] Can you force Vue.js to reload/re-render?

Examples related to javascript

Examples related to vue.js