Juste une petite question.
Pouvez-vous forcer Vue.js
à tout recharger / recalculer ? Si c'est le cas, comment?
javascript
vue.js
Dave
la source
la source
Réponses:
Essayez ce sort magique:
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
la source
$forceUpdate()
je n'ai JAMAIS travaillé pour moi sur 2.5.17.Cela semble être une solution assez propre de matthiasg sur ce problème :
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
key
sur un attribut sur l'hélice garantissait un rafraîchissement lorsque les getters (et l'attribut) se seraient finalement résolus.la source
mounted
sera exécutée, etc.)Pourquoi?
... avez-vous besoin de forcer une mise à jour?
Peut-être que vous n'explorez pas Vue à son meilleur:
Voir les commentaires dans la démo ci-dessous. Ou ouvrez la même démo dans un JSFiddle ici .
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!
la source
Vue.set()
fonctionne également à l'intérieur des composants.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
J'utilise également la montre: dans certaines situations.
la source
Essayez d'utiliser
this.$router.go(0);
pour recharger manuellement la page actuelle.la source
Utilisez
vm.$set('varName', value)
. Recherchez les détails dans Change_Detection_Caveats .la source
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
la source
avec elle utiliser
this.$set(obj,'obj_key',value)
et mettreuniqueKey
à 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
la source
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>
2). Vous pouvez attribuer un
:key
attribut à votre composant et incrémenter lorsque vous souhaitez effectuer un nouveau rendu<your-component :key="index" @click="reRender()"></your-component>
la source
en utilisant la directive v-if
Donc, simplement en changeant la valeur de truevalue de false en true, le composant entre le div sera à nouveau rendu
la source
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'
:key
attribut.Par exemple:
J'utilise celui-ci dans la fente de table BS Vue. Dire que je ferai quelque chose pour ce composant, alors rendez-le unique.
la source
Cela a fonctionné pour moi.
L'autre composant déclenche l'événement refresh-stores-list provoquera le nouveau rendu du composant actuel
la source
J'ai trouvé un moyen. C'est un peu hacky mais ça marche.
Où se
vm
trouve votre objet de modèle de vue etx
est 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.
la source
Travaillé pour moi
la source
ajoutez simplement ce code:
Bonne chance
la source
: key = "$ route.params.param1" utilisez simplement la clé avec tous vos paramètres ses enfants de rechargement automatique ..
la source
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.
la source
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
la source