Vueリストデータを削除した後、ページを自動的に更新する方法と更新方法の詳細な説明

問題の説明:

フロントエンドがデータの一部を削除したり、新しいデータを追加したりすると、バックエンドの操作は成功しますが、フロントエンドは自動的に更新されません。現在のページを更新する必要があります (vue-router を使用して現在のページに再ルーティングすると、ページは更新されず、window.reload() または router.go(0) を使用して更新すると、ブラウザ全体が再読み込みされます)

解決する：

提供/注入の組み合わせ

効果: コンポーネント階層の深さに関係なく、祖先コンポーネントがそのすべての子孫に依存関係を注入できるようにし、上流と下流の関係が確立されている限り常に有効です。

(ルータビューの表示または非表示を制御するために reload メソッドを宣言し、それによってページのリロードを制御します)

App.vue コード:

<テンプレート>
  <div id="アプリ">
      <ルータービュー v-if="isRouterAlive"></ルータービュー>

  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: 'アプリ'、
   コンポーネント: {},
  提供する（）{
    戻る {
      リロード: this.reload
    }
  },
  データ（） {
    戻る {
      isRouterAlive: true、
    };
  },
  CREAD() {},
  メソッド: {
    リロード(){
      this.isRouterAlive = false;
      this.$nextTick(関数(){
        this.isRouterAlive = true;
      })
    }
  },
  マウント() {
  },
}
</スクリプト>

<スタイル>
</スタイル>

方向：

  // vue reload メソッドを参照 inject: ['reload'],


//メソッド内でthis.reload()を呼び出す

若いうちは、自分自身と自分の決意に従って生きるために、常にもっと良く、もっと先へ進まなければなりません。来て！

要約する

これで、ページをアクティブに更新することと、vue リストのデータを削除した後の更新方法についての説明は終わりです。vue リストのデータを削除した後の更新に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。