Solo una domanda veloce.
Puoi forzare Vue.js
a ricaricare / ricalcolare tutto? Se é cosi, come?
Solo una domanda veloce.
Puoi forzare Vue.js
a ricaricare / ricalcolare tutto? Se é cosi, come?
Risposte:
Prova questo incantesimo:
vm.$forceUpdate();
Non è necessario creare alcun vaso sospeso :)
Aggiornamento: ho trovato questa soluzione quando ho iniziato a lavorare solo con VueJS. Tuttavia, ulteriori esplorazioni hanno dimostrato questo approccio come una stampella. Per quanto ricordo, in un attimo mi sono sbarazzato di esso semplicemente mettendo tutte le proprietà che non sono riuscite ad aggiornarsi automaticamente (principalmente quelle nidificate) in proprietà calcolate.
Maggiori informazioni qui: https://vuejs.org/v2/guide/computed.html
$forceUpdate()
mai e poi mai lavorato per me il 2.5.17.
Questa sembra una soluzione abbastanza pulita di matthiasg su questo problema :
è inoltre possibile utilizzare
:key="someVariableUnderYourControl"
e modificare la chiave quando si desidera ricostruire completamente il componente
Per il mio caso d'uso, stavo alimentando un getter Vuex in un componente come supporto. In qualche modo Vuex avrebbe recuperato i dati ma la reattività non si sarebbe avviata in modo affidabile per eseguire nuovamente il rendering del componente. Nel mio caso, l'impostazione del componente key
su un attributo sull'elica ha garantito un aggiornamento quando i getter (e l'attributo) si sono finalmente risolti.
mounted
verrà eseguito, ecc.)
... si ha bisogno di forzare un aggiornamento?
Forse non stai esplorando Vue al meglio:
Affinché Vue reagisca automaticamente alle variazioni di valore, gli oggetti devono essere inizialmente dichiarati in
data
. Oppure, in caso contrario, devono essere aggiunti utilizzandoVue.set()
.
Vedi i commenti nella demo qui sotto. O apri la stessa demo in un JSFiddle qui .
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>
Per padroneggiare questa parte di Vue, controlla la documentazione ufficiale sulla reattività - Avvertenze sul rilevamento delle modifiche . È assolutamente da leggere!
Vue.set()
funziona anche all'interno dei componenti.
Si prega di leggere questo http://michaelnthiessen.com/force-re-render/
Il modo orribile: ricaricare l'intera pagina
Il modo terribile: usare l'hack v-if
Il modo migliore: usare il metodo forceUpdate integrato di Vue
Il modo migliore: cambiare chiave sul tuo componente
<template>
<component-to-re-render :key="componentKey" />
</template>
<script>
export default {
data() {
return {
componentKey: 0,
};
},
methods: {
forceRerender() {
this.componentKey += 1;
}
}
}
</script>
Uso anche watch: in alcune situazioni.
Prova a utilizzare this.$router.go(0);
per ricaricare manualmente la pagina corrente.
Usa vm.$set('varName', value)
. Cerca i dettagli in Change_Detection_Caveats .
Certo .. puoi semplicemente usare l'attributo chiave per forzare il rendering (ricreazione) in qualsiasi momento.
<mycomponent :key="somevalueunderyourcontrol"></mycomponent>
Vedi https://jsfiddle.net/mgoetzke/epqy1xgf/ per un esempio
È stato anche discusso qui: https://github.com/vuejs/Discussion/issues/356#issuecomment-336060875
<my-component :key="uniqueKey" />
insieme ad esso usa this.$set(obj,'obj_key',value)
e aggiorna uniqueKey
per ogni aggiornamento nel valore oggetto (obj) per ogni aggiornamentothis.uniqueKey++
ha funzionato per me in questo modo
Quindi ci sono due modi per farlo,
1). È possibile utilizzare $forceUpdate()
all'interno del gestore del metodo, ad es
<your-component @click="reRender()"></your-component>
<script>
export default {
methods: {
reRender(){
this.$forceUpdate()
}
}
}
</script>
2). È possibile assegnare un :key
attributo al componente e aumentare quando si desidera eseguire nuovamente il rendering
<your-component :key="index" @click="reRender()"></your-component>
<script>
export default {
data() {
return {
index: 1
}
},
methods: {
reRender(){
this.index++
}
}
}
</script>
usando la direttiva v-if
<div v-if="trulyvalue">
<component-here />
</div>
Quindi, semplicemente cambiando il valore di truevalue da false a true, il componente tra il div verrà nuovamente renderizzato
Per ricaricare / ri-renderizzare / aggiornare il componente, interrompere le codifiche lunghe. C'è un modo Vue.JS per farlo.
Usa solo l' :key
attributo.
Per esempio:
<my-component :key="unique" />
Sto usando quello nello slot della tabella BS Vue. Dicendo che farò qualcosa per questo componente in modo da renderlo unico.
Ho trovato un modo. È un po 'confuso ma funziona.
vm.$set("x",0);
vm.$delete("x");
Dov'è vm
l'oggetto del modello di visualizzazione ex
è una variabile inesistente.
Vue.js si lamenterà di ciò nel registro della console ma avvia un aggiornamento per tutti i dati. Testato con la versione 1.0.26.
aggiungi questo codice:
this.$forceUpdate()
In bocca al lupo
: key = "$ route.params.param1" usa semplicemente key con i tuoi parametri per ricaricare automaticamente i figli ..
Ho avuto questo problema con una galleria di immagini che volevo renderizzare a causa delle modifiche apportate in una scheda diversa. Quindi tab1 = imageGallery, tab2 = favoriteImages
tab @ change = "updateGallery ()" -> questo impone alla mia direttiva v-for di elaborare la funzione filteredImages ogni volta che cambio scheda.
<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>
scusate ragazzi, tranne il metodo di ricarica della pagina (sfarfallio), nessuno di loro funziona per me (: la chiave non ha funzionato).
e ho trovato questo metodo dal vecchio forum vue.js che funziona per me:
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>