2015-08-19 2 views
61

Solo una domanda veloce.Puoi forzare Vue.js a ricaricare/ri-renderizzare?

Puoi forzare Vue.js a ricaricare/ricalcolare tutto? Se é cosi, come?

+0

potrebbe ottenere un migliore supporto qui https: // github.com/vuejs/Discussion/issues –

+0

Grande, non sapevo di quel luogo di discussione. Ci proverò – Dave

+0

Hai finito per ottenere una risposta? Sono ansioso di saperlo. – Oddman

risposta

72

Prova questa formula magica:

vm.$forceUpdate(); 

Non c'è bisogno di creare qualsiasi appeso vars :)

Update: ho trovato questa soluzione, quando ho iniziato a lavorare con solo VueJS. Tuttavia ulteriori esplorazioni hanno dimostrato questo approccio come una stampella. Per quanto ricordo, in un attimo mi sono sbarazzato semplicemente mettendo tutte le proprietà che non si aggiornavano automaticamente (per lo più nidificate) in proprietà calcolate.

Maggiori informazioni qui: https://vuejs.org/v2/guide/computed.html

+0

questo mi ha davvero aiutato quando lo stavo usando con un componente di creazione guidata form in Vue. I campi dei campi del mio modulo stavano perdendo lo stato anche se le variabili dei dati erano intatte.Ora sto usando questo per aggiornare le viste quando torno indietro, ho dovuto metterlo nella funzione setTimeout. –

1

Ho trovato un modo. È un po 'hacky ma funziona.

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

Dove vm è l'oggetto vista-modello e x è una variabile inesistente.

Vue.js si lamenterà di ciò nel registro della console ma attiverà un aggiornamento per tutti i dati. Testato con la versione 1.0.26.

4

Questa sembra una soluzione abbastanza pulito da matthiasg su this issue:

è anche possibile utilizzare :key="someVariableUnderYourControl" e modificare la chiave quando si desidera componente per essere completamente ricostruito

Per il mio caso d'uso, stavo alimentando un getter Vuex in un componente come sostegno. In qualche modo Vuex recuperava i dati, ma la reattività non si avviava in modo affidabile per rerenderne il componente. Nel mio caso, l'impostazione del componente key su un attributo sul puntello garantisce un aggiornamento quando i getter (e l'attributo) vengono finalmente risolti.

0

mediante v-se direttiva

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

Così semplicemente cambiando il valore di trulyvalue da false a true causerà la componente tra il div a rerender nuovo