webentwicklung-frage-antwort-db.com.de

Wie kann ich eine Vue-Komponente neu laden?

Ich weiß, dass die Lösung die Propellendaten wie folgt aktualisiert:

this.selectedContinent = ""

Ich möchte aber eine andere Lösung verwenden

Nachdem ich einige Referenzen gelesen habe, lautet die Lösung:

this.$forceUpdate()

Ich versuche es, aber es funktioniert nicht

Demo und vollständiger Code wie folgt: 

https://jsfiddle.net/Lgxrcc5p/13/

Sie können auf die Schaltfläche test klicken, um es zu testen

Ich brauche eine andere Lösung als die Eigenschaftsdaten zu aktualisieren

vue.jsvuejs2vue-componentvuex
2
Success Man

Ich verwende v-if, um die Komponente zu rendern:

<div id="app">
      <button type="button" @click="updateComponent">test</button>
      <test-el v-if="show"></test-el>
</div>

Demo

3
Julien

Sie müssen Ihrer Komponente einen Schlüssel zuweisen. Wenn Sie eine Komponente erneut rendern möchten, aktualisieren Sie einfach den Schlüssel . Weitere Informationen hier .

<template>
    <component-to-re-render :key="componentKey" />
</template>

export default {
  data() {
    return {
      componentKey: 0,
    }
  },
  methods: {
    forceRerender() {
      this.componentKey += 1
    }
  }
}
0
Ilyich

Sie können Object.assign verwenden, um anfängliche Dateneigenschaften zuzuweisen.

Anstelle von this.$forceUpdate()

Sie sollten Object.assign(this.$data,this.$options.data.call(this)) verwenden.

Hier verwenden wir das. $ Options.data erhalten Originaldaten und weisen diese Werte diesem.

Siehe die aktualisierte Geige Link .

Update:

Eine andere Methode: Link

0
Shubham Patel

Ich habe auch das gleiche Problem. Ich habe location.reload() zum erneuten Laden der Komponente verwendet.
Dies ist möglicherweise nicht der richtige Weg, um dieses Problem zu lösen. Aber das hat mein Problem gelöst.

0
Pulkit Aggarwal