Nur eine kurze Frage.
Können Sie zwingen Vue.js
, alles neu zu laden / neu zu berechnen ? Wenn das so ist, wie?
Nur eine kurze Frage.
Können Sie zwingen Vue.js
, alles neu zu laden / neu zu berechnen ? Wenn das so ist, wie?
Antworten:
Versuchen Sie diesen Zauber:
vm.$forceUpdate();
Keine Notwendigkeit, hängende Vars zu erstellen :)
Update: Ich habe diese Lösung gefunden, als ich erst mit VueJS angefangen habe. Weitere Untersuchungen haben diesen Ansatz jedoch als Krücke bewiesen. Soweit ich mich erinnere, habe ich es nach einer Weile losgeworden, einfach alle Eigenschaften, die nicht automatisch aktualisiert wurden (meistens verschachtelte), in berechnete Eigenschaften zu setzen.
Weitere Informationen hier: https://vuejs.org/v2/guide/computed.html
$forceUpdate()
hat NIEMALS am 2.5.17 für mich gearbeitet.
Dies scheint eine ziemlich saubere Lösung von matthiasg zu diesem Thema zu sein :
Sie können
:key="someVariableUnderYourControl"
den Schlüssel auch verwenden und ändern, wenn die Komponente vollständig neu erstellt werden soll
Für meinen Anwendungsfall habe ich einen Vuex-Getter als Requisite in eine Komponente eingespeist. Irgendwie würde Vuex die Daten abrufen, aber die Reaktivität würde nicht zuverlässig eintreten, um die Komponente neu zu rendern. In meinem Fall key
garantierte das Setzen der Komponente auf ein Attribut auf der Requisite eine Aktualisierung, wenn die Getter (und das Attribut) endgültig aufgelöst wurden.
mounted
wird ausgeführt usw.)
... tun Sie brauchen , um eine Aktualisierung zu erzwingen?
Vielleicht erkunden Sie Vue nicht von seiner besten Seite:
Damit Vue automatisch auf Wertänderungen reagiert, müssen die Objekte zunächst in deklariert werden
data
. Wenn nicht, müssen sie mit hinzugefügt werdenVue.set()
.
Siehe Kommentare in der Demo unten. Oder öffnen Sie hier dieselbe Demo in einer JSFiddle .
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>
Um diesen Teil von Vue zu beherrschen, lesen Sie die offiziellen Dokumente zu Reaktivität - Änderungserkennungsvorbehalte . Es ist ein Muss zu lesen!
Vue.set()
funktioniert auch innerhalb von Komponenten.
Bitte lesen Sie dies http://michaelnthiessen.com/force-re-render/
Der schreckliche Weg: die gesamte Seite neu laden
Der schreckliche Weg: den v-if-Hack verwenden
Der bessere Weg: die integrierte forceUpdate-Methode von Vue verwenden
Der beste Weg: Schlüsselwechsel für Ihre Komponente
<template>
<component-to-re-render :key="componentKey" />
</template>
<script>
export default {
data() {
return {
componentKey: 0,
};
},
methods: {
forceRerender() {
this.componentKey += 1;
}
}
}
</script>
Ich benutze auch Uhr: in einigen Situationen.
Versuchen Sie, this.$router.go(0);
die aktuelle Seite manuell neu zu laden.
Verwenden Sie vm.$set('varName', value)
. Suchen Sie nach Details in Change_Detection_Caveats .
Sicher .. Sie können einfach das Schlüsselattribut verwenden, um jederzeit ein erneutes Rendern (Neuerstellen) zu erzwingen.
<mycomponent :key="somevalueunderyourcontrol"></mycomponent>
Siehe https://jsfiddle.net/mgoetzke/epqy1xgf/Ein Beispiel finden
Es wurde auch hier diskutiert: https://github.com/vuejs/Discussion/issues/356#issuecomment-336060875
<my-component :key="uniqueKey" />
Verwenden this.$set(obj,'obj_key',value)
und aktualisieren Sie uniqueKey
für jedes Update den Objektwert (obj) für jedes Updatethis.uniqueKey++
es hat bei mir so funktioniert
Sie können dies also auf zwei Arten tun:
1). Sie können $forceUpdate()
in Ihrem Methodenhandler verwenden, dh
<your-component @click="reRender()"></your-component>
<script>
export default {
methods: {
reRender(){
this.$forceUpdate()
}
}
}
</script>
2). Sie können :key
Ihrer Komponente ein Attribut und eine Erhöhung zuweisen, wenn Sie erneut rendern möchten
<your-component :key="index" @click="reRender()"></your-component>
<script>
export default {
data() {
return {
index: 1
}
},
methods: {
reRender(){
this.index++
}
}
}
</script>
mit der v-if-Direktive
<div v-if="trulyvalue">
<component-here />
</div>
Wenn Sie also einfach den Wert von truevalue von false auf true ändern, wird die Komponente zwischen div erneut erneut gerendert
Stoppen Sie die langen Codierungen, um die Komponente neu zu laden / neu zu rendern / zu aktualisieren. Dafür gibt es eine Vue.JS-Methode.
Verwenden Sie einfach das :key
Attribut.
Beispielsweise:
<my-component :key="unique" />
Ich benutze diesen im BS Vue Table Slot. Ich sage, dass ich etwas für diese Komponente tun werde, also mache sie einzigartig.
Ich habe einen Weg gefunden. Es ist ein bisschen hacky, funktioniert aber.
vm.$set("x",0);
vm.$delete("x");
Wo vm
ist Ihr Ansichtsmodellobjekt undx
ist eine nicht vorhandene Variable?
Vue.js beschwert sich darüber im Konsolenprotokoll, löst jedoch eine Aktualisierung aller Daten aus. Getestet mit Version 1.0.26.
Fügen Sie einfach diesen Code hinzu:
this.$forceUpdate()
Viel Glück
: key = "$ route.params.param1" Verwenden Sie einfach den Schlüssel mit Ihren Parametern, deren Kinder automatisch neu laden.
Ich hatte dieses Problem mit einer Bildergalerie, die ich aufgrund von Änderungen, die auf einer anderen Registerkarte vorgenommen wurden, erneut rendern wollte. Also tab1 = imageGallery, tab2 = FavoriteImages
tab @ change = "updateGallery ()" -> Dies zwingt meine v-for-Direktive, die Funktion filteredImages bei jedem Tabwechsel zu verarbeiten.
<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>
Entschuldigung, außer der Methode zum erneuten Laden von Seiten (Flackern), keiner von ihnen funktioniert für mich (: Schlüssel hat nicht funktioniert).
und ich habe diese Methode aus dem alten vue.js Forum gefunden, die für mich funktioniert:
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>