Încercați această vrajă:

vm.$forceUpdate();

Nu este nevoie pentru a crea orice agățat vars :)

Actualizare: am găsit această soluție, atunci când am început să lucrez cu VueJS. Cu toate acestea explorarea în continuare această abordare s-a dovedit ca de o cârjă. Pe cât îmi amintesc, într-o vreme am scăpat de ea pur și simplu pune toate proprietățile care nu a reușit să reîmprospăta automat (cea mai mare parte imbricate cele) calculat în proprietăți.

Mai multe informatii aici: https://vuejs.org/v2/guide/computed.html

Acest lucru pare a fi destul de curat soluție de matthiasg pe această problemă:

puteți utiliza, de asemenea,`: cheie="someVariableUnderYourControl" și de a schimba cheia atunci când doriți să componentă a fi complet reconstruit

Pentru caz de utilizare, am hrănit o Vuex getter într-o componentă ca un propunerii. Cumva Vuex-ar aduce date dar reactivitatea n't fiabil lovi cu piciorul în rerender componenta. În cazul meu, stabilirea componentei "cheia" de la un atribut pe prop garantat o reîmprospătare atunci când getters (și atributul) în cele din urmă rezolvată.

De ce?

...te trebuie pentru a forța o actualizare?

Poate că nu sunt explorarea Vue la cele mai bune:

Pentru a avea Vue automat a reacționa la modificările de valoare, obiectele trebuie să fie declarată inițial în "date". Sau, dacă nu, ei trebuie să fie adăugat folosind Vue.set().

Vezi comentarii în demo-ul de mai jos. Sau deschide [același demo într-un JSFiddle aici][1].

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>
  this.person.name = 'Arantes'; (will auto update because `name` was in `data`)<br>
  this.person.nickname = 'Pele'; (will NOT auto update because `nickname` was not in `data`)<br>
  Vue.set(this.person, 'address', '99th st.'); (WILL auto update even though `address` was not in `data`)
  <br>
  <br>
  For more info, read the comments in the code. Or check the docs on Reactivity (link below).
</div>

Să stăpânească această parte a Vue, verificați Documente Oficiale pe Reactivitate - Detectare Schimbare Limitări. Aceasta este o trebuie să citească!

Folosesc neg.$set('varName', valoare)`. Uita-te pentru detalii în Change_Detection_Caveats.

Vă rugăm să citiți acest http://michaelnthiessen.com/force-re-render/

În mod oribil: reîncărcarea întregii pagini
Modul teribil: folosind v-dacă hack
Cel mai bun mod: utilizarea Vue built-in forceUpdate metodă
Cel mai bun mod: cheie-schimbare pe site-component

<script>
 export default {
  data() {
    return {
      componentKey: 0,
    };
  },
  methods: {
    forceRerender() {
      this.componentKey += 1;  
    }
  }
 }
</script>

Am folosi, de asemenea, uita-te la: în unele situații.

Încercați să folosiți asta.$router-ul.du-te(0); manual reîncarcă pagina curentă.

Sigur .. puteți folosi pur și simplu atribut esențial pentru a forța re-randare (de recreere), în orice moment.

<mycomponent :cheie="somevalueunderyourcontrol"></mycomponent>

Vezi https://jsfiddle.net/mgoetzke/epqy1xgf/ pentru un exemplu

Acesta a fost, de asemenea, discutate aici: https://github.com/vuejs/Discussion/issues/356#issuecomment-336060875

folosind v-dacă directiva

<div v-if="trulyvalue">

 </div>

Deci, pur și simplu prin schimbarea valorii trulyvalue de la false la true va determina componenta între div a rerender din nou

Am găsit o cale. L's un pic mai ieftin, dar funcționează.

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

Unde vm este punctul dumneavoastră de vedere-modelul obiect, iar " x " este un non-existent variabilă.

Vue.js se va plânge de acest lucru în jurnalul consola dar nu declanșa o actualizare pentru toate datele. Testat cu versiunea 1.0.26.

Aceasta a lucrat pentru mine.

created() {
            EventBus.$on('refresh-stores-list', () => {
                this.$forceUpdate();
            });
        },

Cealaltă componentă incendii refresh-magazine-lista de evenimente vor provoca la componenta actuala a rerender

împreună cu acesta a folosi asta.$set(obj,'obj_key',valoare) si updateuniqueKey pentru fiecare actualizare în obiect (obj) valoarea pentru fiecare actualizare asta.uniqueKey++`

ea a lucrat pentru mine în acest fel

În scopul de a reîncărca/re-render/refresh componentă, opri codificările lung. Există o Vue.JS mod de a face asta.

Doar folosi:cheie` atribut.

De exemplu:

``

Eu sunt, folosind ca unul din BS Vue Slot de Masă. Spun că voi face ceva pentru această componentă deci face unic.

O altă modalitate este de a implica vue-router care este de obicei folosit oricum, în cele mai multe aplicații.

De exemplu, aveți nevoie pentru a reîmprospăta/cauza update cârlige' executarea pe toate/numai unele componente de la a ajunge la o pagină. Poti fi interesat actualizarea nu traseului component (nu este folosit în dirijarea secțiune ca și component's valoarea proprietatii), astfel navigarea gardienii nu se va declanșa. De asemenea, componenta în cauză pot fi reutilizate, adică Vue poate o ia din cache, evitând declanșarea ciclului de viață cârlige. Deci, în acest caz încă mai poate atinge obiectivul de a trece un unic valoarea de la router la traseu componentă ca

path: ":model",
name: "model",
component: MyComponent,
props: (route) => ({
    // other props...
    timestamp: + new Date()
})

Atunci ar trebui să accepte acest prop ca recuzită: ['timestamp']` în traseu componentă și trece în jos pentru copilul componente în care actualizarea sunteți interesat. Apoi, utilizați-l acolo ca un atribut pe un element sau în interiorul invizibil tag. Dacă tu nu't folosi oriunde în șablon, acesta nu va provoca nici un update, daca ai face - orice moment te-a lovit ca traseu o valoare unică este generat și a trecut în jos pentru ruta componentă și copii în cazul în care vă puteți provoca actualizarea lor cu ajutorul trecut prin elemente de recuzită valoarea din șablon.

:cheie="$rută.params.param1" utilizați doar cheie cu orice params sale auto reload copii..

A lucrat pentru mine

    data () {
        return {
            userInfo: null,
            offers: null
        }
    },

    watch: {
        '$route'() {
            this.userInfo = null
            this.offers = null
            this.loadUserInfo()
            this.getUserOffers()
        }
    }

Am avut această problemă cu o galerie de imagini pe care am vrut să rerender datorită modificărilor făcute pe o altă filă. Deci tab1 = imageGallery, fila2 = favoriteImages

tab @modifica="updateGallery()" -> această forțele mele v-pentru directiva pentru a procesa filteredImages funcția de fiecare dată când mă comuta între file.

<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>