Detaillierte Erläuterung zum automatischen Aktualisieren der Seite und zur Aktualisierungsmethode nach dem Löschen von Vue-Listendaten

Problembeschreibung:

Nachdem das Front-End Daten gelöscht oder neue Daten hinzugefügt hat, ist der Back-End-Vorgang erfolgreich, aber das Front-End wird nicht automatisch aktualisiert. Sie müssen die aktuelle Seite aktualisieren (verwenden Sie vue-router, um zur aktuellen Seite umzuleiten. Die Seite wird nicht aktualisiert. Wenn window.reload () oder router.go (0) zum Aktualisieren verwendet werden, wird der gesamte Browser neu geladen.)

lösen:

Die Kombination aus Versorgen und Injizieren

Wirkung: Ermöglicht einer Vorgängerkomponente, eine Abhängigkeit in alle ihre Nachkommen einzufügen, unabhängig davon, wie tief die Komponentenhierarchie ist. Dies ist immer wirksam, solange die Upstream- und Downstream-Beziehungen hergestellt sind.

(Deklarieren Sie die Neulademethode, um die Anzeige oder das Ausblenden der Router-Ansicht zu steuern und so das Neuladen der Seite zu steuern.)

App.vue-Code:

<Vorlage>
  <div id="app">
      <router-view v-if="isRouterAlive"></router-view>

  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: "App",
   Komponenten: {},
  bieten(){
    zurückkehren {
      neu laden: this.reload
    }
  },
  Daten() {
    zurückkehren {
      isRouterAlive: wahr,
    };
  },
  cread() {},
  Methoden: {
    neu laden(){
      this.isRouterAlive = falsch;
      dies.$nextTick(Funktion(){
        dies.isRouterAlive = true;
      })
    }
  },
  montiert() {
  },
}
</Skript>

<Stil>
</Stil>

Anwendung:

  // Referenz Vue Reload-Methode inject: ['reload'],


//Rufen Sie this.reload() in der Methode auf

In jungen Jahren muss man immer besser und weiter gehen, um sich selbst und der Zielstrebigkeit, die in einem steckt, gerecht zu werden! Komm schon!

Zusammenfassen

Dies ist das Ende dieses Artikels über das aktive Aktualisieren der Seite und die Aktualisierungsmethode nach dem Löschen von Daten in der Vue-Liste. Weitere relevante Inhalte zum Aktualisieren nach dem Löschen von Daten in der Vue-Liste finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!