Vue.js 2 で適切なページネーションを行う方法

Question

vue を使用してページネーションを作成するときに問題が発生します。私のタスクは、ボタンの番号をクリックしたときに、jsonplaceholder 内の新しいタスクが読み込まれることを確認することです。

最初のページと 2 番目のページが正常にロードされました。これは this.fetchTodos() 操作に直接関係していると思います。私はちょうど Vue を学習しているところですが、ロードせずに新しいページに移動するときにデータを更新する方法を理解するのに助けが必要です。

この場合、ページのURLを変更する必要があります(リクエストの取得)。ページのステータスが変化していますが、3 番目のページをクリックしても投稿が読み込まれません。

以下は、状況を理解するのに役立つと思われる 4 つのファイルのコードです。

GitHub を使用すると簡単になるかもしれません。ページ分割されたブランチをチェックしてください

ご協力いただきありがとうございます!ご質問がある場合、またはさらに詳しい情報が必要な場合は、コメントにご記入ください

TodoListView.vue - Todo が取得され、ページ上に表示される開始ページです。

リーリー

TodoListPaginationView - ページネーションがクリックされたときに 2 番目のページと別のページをロードする 2 番目のファイルです。

リーリー

PaginationBootstrap.vue - 3 番目のファイルはページング ロジックです。 Ui ブートストラップ 5 ファイル。

リーリー

todosModule.js - 最後のファイル。todos の vuex ロジックです。

リーリー

Answer 1

わかりました、解決策は自分で見つけました。

最も重要なのは観察者です。 TodoListPaginationView.vue に次のコードを追加しました:

リーリー