Nur eine kurze Frage.

Können Sie zwingen Vue.js, alles neu zu laden / neu zu berechnen ? Wenn das so ist, wie?

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

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 keygarantierte das Setzen der Komponente auf ein Attribut auf der Requisite eine Aktualisierung, wenn die Getter (und das Attribut) endgültig aufgelöst wurden.

Warum?

... 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 werdendata . 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!

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 uniqueKeyfü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 :keyIhrer 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 :keyAttribut.

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.

Das hat bei mir funktioniert.

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

Die andere Komponente löst das Update-Stores-List-Ereignis aus, wodurch die aktuelle Komponente erneut gerendert wird

Ich habe einen Weg gefunden. Es ist ein bisschen hacky, funktioniert aber.

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

Wo vmist 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.

Hat für mich gearbeitet

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

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

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>