Krótkie pytanie.
Czy możesz zmusić Vue.js
do ponownego załadowania / ponownego obliczenia wszystkiego? Jeśli tak to jak?
Krótkie pytanie.
Czy możesz zmusić Vue.js
do ponownego załadowania / ponownego obliczenia wszystkiego? Jeśli tak to jak?
Odpowiedzi:
Wypróbuj to magiczne zaklęcie:
vm.$forceUpdate();
Nie trzeba tworzyć żadnych wiszących stojaków :)
Aktualizacja: Znalazłem to rozwiązanie, kiedy zacząłem pracować z VueJS. Jednak dalsze badania potwierdziły to podejście jako kulę. O ile pamiętam, po pewnym czasie się go pozbyłem, po prostu umieszczając wszystkie właściwości, które nie odświeżyły się automatycznie (głównie te zagnieżdżone) w właściwościach obliczeniowych.
Więcej informacji tutaj: https://vuejs.org/v2/guide/computed.html
$forceUpdate()
NIGDY nie działała dla mnie 2.5.17.
Wydaje się, że to całkiem czyste rozwiązanie Matthiasga w tej sprawie :
możesz także użyć
:key="someVariableUnderYourControl"
i zmienić klucz, jeśli chcesz całkowicie odbudować komponent
W moim przypadku użyłem gettera Vuex do komponentu jako rekwizytu. Jakoś Vuex pobierałby dane, ale reaktywność nie uruchamiałaby się rzetelnie w celu ponownego wysłania komponentu. W moim przypadku ustawienie komponentu key
na jakiś atrybut rekwizytu gwarantowało odświeżenie, gdy gettery (i atrybut) w końcu zostały rozwiązane.
mounted
zostanie uruchomione itp.)
... czy musisz wymusić aktualizację?
Być może nie eksplorujesz Vue w najlepszym wydaniu:
Aby Vue automatycznie reagował na zmiany wartości, obiekty muszą być wstępnie zadeklarowane w
data
. Lub, jeśli nie, należy je dodać za pomocąVue.set()
.
Zobacz komentarze w pokazie poniżej. Lub otwórz to samo demo w JSFiddle tutaj .
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>
Aby opanować tę część Vue, sprawdź oficjalne dokumenty dotyczące reaktywności - zastrzeżenia dotyczące wykrywania zmian . To trzeba przeczytać!
Vue.set()
działa również wewnątrz komponentów.
Proszę przeczytać to http://michaelnthiessen.com/force-re-render/
Okropny sposób: przeładowanie całej strony
Okropny sposób: użycie hakowania v-if
Lepszy sposób: użycie wbudowanej metody forceUpdate Vue
Najlepszy sposób: zmiana klucza w komponencie
<template>
<component-to-re-render :key="componentKey" />
</template>
<script>
export default {
data() {
return {
componentKey: 0,
};
},
methods: {
forceRerender() {
this.componentKey += 1;
}
}
}
</script>
Używam również zegarka: w niektórych sytuacjach.
Spróbuj użyć this.$router.go(0);
do ręcznego ponownego załadowania bieżącej strony.
Zastosowanie vm.$set('varName', value)
. Sprawdź szczegóły w Change_Detection_Caveats .
Jasne ... możesz po prostu użyć atrybutu kluczowego, aby wymusić ponowne renderowanie (odtwarzanie) w dowolnym momencie.
<mycomponent :key="somevalueunderyourcontrol"></mycomponent>
Zobacz https://jsfiddle.net/mgoetzke/epqy1xgf/ na przykład
Omówiono również tutaj: https://github.com/vuejs/Discussion/issues/356#issuecomment-336060875
<my-component :key="uniqueKey" />
wraz z nim używaj this.$set(obj,'obj_key',value)
i aktualizuj uniqueKey
dla każdej aktualizacji wartości obiektu (obj) dla każdej aktualizacjithis.uniqueKey++
działało dla mnie w ten sposób
Więc możesz to zrobić na dwa sposoby,
1). Możesz użyć $forceUpdate()
w swoim module obsługi metody, tj
<your-component @click="reRender()"></your-component>
<script>
export default {
methods: {
reRender(){
this.$forceUpdate()
}
}
}
</script>
2). Możesz nadać :key
atrybut swojemu komponentowi i zwiększyć go, gdy chcesz ponownie wysłać
<your-component :key="index" @click="reRender()"></your-component>
<script>
export default {
data() {
return {
index: 1
}
},
methods: {
reRender(){
this.index++
}
}
}
</script>
za pomocą dyrektywy v-if
<div v-if="trulyvalue">
<component-here />
</div>
Tak więc po prostu poprzez zmianę wartości truevalue z false na true spowoduje ponowne przesłanie komponentu między div
Aby ponownie załadować / ponownie renderować / odświeżyć komponent, zatrzymaj długie kodowanie. Jest na to sposób Vue.JS.
Wystarczy użyć :key
atrybutu.
Na przykład:
<my-component :key="unique" />
Używam tego w automacie stołowym BS Vue. Mówiąc, że zrobię coś dla tego komponentu, więc uczyń go wyjątkowym.
Znalazłem drogę. Jest trochę zuchwały, ale działa.
vm.$set("x",0);
vm.$delete("x");
Gdzie vm
jest twój obiekt modelu widoku, ix
nie istnieje zmienna.
Vue.js będzie narzekać na to w dzienniku konsoli, ale powoduje odświeżenie wszystkich danych. Testowane z wersją 1.0.26.
po prostu dodaj ten kod:
this.$forceUpdate()
Powodzenia
: key = "$ route.params.param1" po prostu użyj klucza z dowolnymi parametrami, jego automatyczne ładowanie dzieci.
Miałem ten problem z galerią obrazów, którą chciałem ponownie wysłać ze względu na zmiany wprowadzone na innej karcie. Tak więc tab1 = imageGallery, tab2 = favouriteImages
tab @ change = "updateGallery ()" -> to zmusza moją dyrektywę v-for do przetwarzania funkcji filterImages za każdym razem, gdy przełączam tabulatory.
<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>
przepraszam chłopaki, z wyjątkiem metody przeładowania strony (migotanie), żaden z nich nie działa dla mnie (: klucz nie działał).
i znalazłem tę metodę ze starego forum vue.js, które działa dla mnie:
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>