Juste une petite question.

Pouvez-vous forcer Vue.jsà tout recharger / recalculer ? Si c'est le cas, comment?

Essayez ce sort magique:

vm.$forceUpdate();

Pas besoin de créer de vars suspendus :)

Mettre à jour: j'ai trouvé cette solution lorsque j'ai seulement commencé à travailler avec VueJS. Cependant, une exploration plus approfondie a prouvé cette approche comme une béquille. Pour autant que je me souvienne, dans un certain temps, je m'en suis débarrassé en mettant simplement toutes les propriétés qui n'ont pas pu être actualisées automatiquement (la plupart imbriquées) dans des propriétés calculées.

Plus d'informations ici: https://vuejs.org/v2/guide/computed.html

Cela semble être une solution assez propre de matthiasg sur ce problème :

vous pouvez également utiliser :key="someVariableUnderYourControl"et modifier la clé lorsque vous souhaitez que le composant soit complètement reconstruit

Pour mon cas d'utilisation, j'alimentais un getter Vuex dans un composant comme accessoire. D'une manière ou d'une autre, Vuex récupérait les données, mais la réactivité ne se déclenchait pas de manière fiable pour restituer le composant. Dans mon cas, définir le composant keysur un attribut sur l'hélice garantissait un rafraîchissement lorsque les getters (et l'attribut) se seraient finalement résolus.

Pourquoi?

... avez-vous besoin de forcer une mise à jour?

Peut-être que vous n'explorez pas Vue à son meilleur:

Pour que Vue réagisse automatiquement aux changements de valeur, les objets doivent être initialement déclarés dansdata . Sinon, ils doivent être ajoutés à l'aide deVue.set() .

Voir les commentaires dans la démo ci-dessous. Ou ouvrez la même démo dans un JSFiddle ici .

new Vue({
  el: '#app',
  data: {
    person: {
      name: 'Edson'
    }
  },
  methods: {
    changeName() {
      // because name is declared in data, whenever it
      // changes, Vue automatically updates
      this.person.name = 'Arantes';
    },
    changeNickname() {
      // because nickname is NOT declared in data, when it
      // changes, Vue will NOT automatically update
      this.person.nickname = 'Pele';
      // although if anything else updates, this change will be seen
    },
    changeNicknameProperly() {
      // when some property is NOT INITIALLY declared in data, the correct way
      // to add it is using Vue.set or this.$set
      Vue.set(this.person, 'address', '123th avenue.');
      
      // subsequent changes can be done directly now and it will auto update
      this.person.address = '345th avenue.';
    }
  }
})

/* CSS just for the demo, it is not necessary at all! */
span:nth-of-type(1),button:nth-of-type(1) { color: blue; }
span:nth-of-type(2),button:nth-of-type(2) { color: red; }
span:nth-of-type(3),button:nth-of-type(3) { color: green; }
span { font-family: monospace }

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <span>person.name: {{ person.name }}</span><br>
  <span>person.nickname: {{ person.nickname }}</span><br>
  <span>person.address: {{ person.address }}</span><br>
  <br>
  <button @click="changeName">this.person.name = 'Arantes'; (will auto update because `name` was in `data`)</button><br>
  <button @click="changeNickname">this.person.nickname = 'Pele'; (will NOT auto update because `nickname` was not in `data`)</button><br>
  <button @click="changeNicknameProperly">Vue.set(this.person, 'address', '99th st.'); (WILL auto update even though `address` was not in `data`)</button>
  <br>
  <br>
  For more info, read the comments in the code. Or check the docs on <b>Reactivity</b> (link below).
</div>

Pour maîtriser cette partie de Vue, consultez les documents officiels sur la réactivité - mises en garde concernant la détection des changements . C'est à lire absolument!

Veuillez lire ce http://michaelnthiessen.com/force-re-render/

L'horrible façon: recharger la page entière
L'horrible façon: utiliser le hack v-if
La meilleure façon: utiliser la méthode forceUpdate intégrée de Vue
La meilleure façon: changer la clé de votre composant

<template>
   <component-to-re-render :key="componentKey" />
</template>

<script>
 export default {
  data() {
    return {
      componentKey: 0,
    };
  },
  methods: {
    forceRerender() {
      this.componentKey += 1;  
    }
  }
 }
</script>

J'utilise également la montre: dans certaines situations.

Essayez d'utiliser this.$router.go(0);pour recharger manuellement la page actuelle.

Utilisez vm.$set('varName', value). Recherchez les détails dans Change_Detection_Caveats .

Bien sûr .. vous pouvez simplement utiliser l'attribut key pour forcer le re-rendu (loisirs) à tout moment.

<mycomponent :key="somevalueunderyourcontrol"></mycomponent>

Voir https://jsfiddle.net/mgoetzke/epqy1xgf/ pour un exemple

Il a également été discuté ici: https://github.com/vuejs/Discussion/issues/356#issuecomment-336060875

<my-component :key="uniqueKey" />

avec elle utiliser this.$set(obj,'obj_key',value) et mettre uniqueKeyà jour pour chaque mise à jour dans la valeur d'objet (obj) pour chaque mise à jourthis.uniqueKey++

cela a fonctionné pour moi de cette façon

Il y a donc deux façons de le faire,

1). Vous pouvez utiliser à l' $forceUpdate()intérieur de votre gestionnaire de méthode ie

<your-component @click="reRender()"></your-component>

<script>
export default {
   methods: {
     reRender(){
        this.$forceUpdate()
     }
   }
}
</script>

2). Vous pouvez attribuer un :keyattribut à votre composant et incrémenter lorsque vous souhaitez effectuer un nouveau rendu

<your-component :key="index" @click="reRender()"></your-component>

<script>
export default {
   data() {
     return {
        index: 1
     }
   },
   methods: {
     reRender(){
        this.index++
     }
   }
}
</script>

en utilisant la directive v-if

<div v-if="trulyvalue">
    <component-here />
 </div>

Donc, simplement en changeant la valeur de truevalue de false en true, le composant entre le div sera à nouveau rendu

Afin de recharger / re-rendre / rafraîchir le composant, arrêtez les longs codages. Il y a une façon Vue.JS de le faire.

Utilisez simplement l' :keyattribut.

Par exemple:

<my-component :key="unique" />

J'utilise celui-ci dans la fente de table BS Vue. Dire que je ferai quelque chose pour ce composant, alors rendez-le unique.

Cela a fonctionné pour moi.

created() {
            EventBus.$on('refresh-stores-list', () => {
                this.$forceUpdate();
            });
        },

L'autre composant déclenche l'événement refresh-stores-list provoquera le nouveau rendu du composant actuel

J'ai trouvé un moyen. C'est un peu hacky mais ça marche.

vm.$set("x",0);
vm.$delete("x");

Où se vmtrouve votre objet de modèle de vue et xest une variable inexistante.

Vue.js s'en plaindra dans le journal de la console mais cela déclenchera une actualisation de toutes les données. Testé avec la version 1.0.26.

Travaillé pour moi

    data () {
        return {
            userInfo: null,
            offers: null
        }
    },

    watch: {
        '$route'() {
            this.userInfo = null
            this.offers = null
            this.loadUserInfo()
            this.getUserOffers()
        }
    }

ajoutez simplement ce code:

this.$forceUpdate()

Bonne chance

: key = "$ route.params.param1" utilisez simplement la clé avec tous vos paramètres ses enfants de rechargement automatique ..

J'ai eu ce problème avec une galerie d'images que je voulais rendre en raison de modifications apportées sur un autre onglet. Donc tab1 = imageGallery, tab2 = favoriteImages

tab @ change = "updateGallery ()" -> cela force ma directive v-for à traiter la fonction filterImages chaque fois que je change d'onglet.

<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>

désolé les gars, sauf la méthode de rechargement des pages (scintillement), aucune ne fonctionne pour moi (: la clé n'a pas fonctionné).

et j'ai trouvé cette méthode sur l'ancien forum vue.js qui fonctionne pour moi:

https://github.com/vuejs/Discussion/issues/356

<template>
    <div v-if="show">
       <button @click="rerender">re-render</button>
    </div>
</template>
<script>
    export default {
        data(){
            return {show:true}
        },
        methods:{
            rerender(){
                this.show = false
                this.$nextTick(() => {
                    this.show = true
                    console.log('re-render start')
                    this.$nextTick(() => {
                        console.log('re-render end')
                    })
                })
            }
        }
    }
</script>