Vue Router を使用してデータ テーブルを強化する

Question

DataTable の行にリンク/ボタンを追加して、クリックすると vue ルートに移動しようとしています。もちろん、href="/item/${id}" を含む単純な <a> リンクを追加することもできます。ただし、これによりルーターがバイパスされ、ページ全体がリロードされます

私は 2 つの解決策を思いつきました。どちらも onclick を設定してコードを実行することに依存しています。

1. route1 では、vueRoute という関数を window オブジェクトにアタッチします。これは、vue メソッド への単なるコールバックです。 Route1 への参照。この関数はどこからでも呼び出せるようになりました

2. route2 で、onclick で CustomEvent をトリガーし、route2# によってトリガーされるイベント リスナーを設定します。 ## vue メソッドが処理します

どちらの解決策にも満足できません。機能しますが、見た目は「悪趣味」です。どうすればいいですか？

リーリー

実際の例はここにあります: https://stackblitz.com/edit/datatables-net-vue3-simple-mgdhf1?file=src/components/ListView.vue

編集: 私が実際に行ったことは、DataTables よりも Vue でうまく機能するヘッドレス テーブル コンポーネント (TanStack) に切り替えることでした。ただし、DataTables を使用する必要がある場合は、以下の @Damzaky と @Moritz Ringler によって投稿されたソリューションが機能します。

Answer 1

これが最良の解決策であるとは言いませんが、私の意見では、私の知る限り、本当の「最良」の解決策はありません。データテーブルは jQuery を使用しており、ここでは vue を使用しているためです (DOM コントロールは非常にフレンドリーです) ）矛盾しています）。簡単に検索した後、方法が見つかりませんでした データテーブルの render プロパティ内で vue コンポーネントをレンダリングします。

したがって、私のアイデアは異なります。 render 関数を簡素化し、drawCallback を使用してイベント リスナーを追加し、イベント デリゲートを使用してリスナーをアタッチします。

ドキュメントより:

リーリー

したがって、各リンクに data-item-id を追加し、親のクリック イベントを使用してルーター プッシュ (イベント委任) を実行します。これが最良の答えではないことは承知していますが、もしかしたらこれもあなたにとっての別の選択肢かもしれません。

これ 興味があれば、これはフォークされたサンドボックスです。

Answer 2

DataTable オブジェクトに @click ハンドラーを設定できます:

リーリー

イベントは通常のクリック イベントであるため、識別可能な ID データセット属性が必要です:

リーリー

クリック ハンドラーは、ID が取得できること、およびクリックがリンクからのものであることを確認するだけで済みます。 リーリー

更新された

Stack Blitz

---

興味深いことに、背景として、問題は Vue と jQuery の間の接続ですらではなく、DataTable の動作方法にあります。具体的には、セルのクリックや行のクリックのイベントがなく、レンダラーは HTML 文字列のみを返すことができます。

これは驚くべきことではありません。これが jQuery の仕組みです。データ、ビュー、動作は本質的にリンクされていませんが、適切と思われる方法でそれらを接続できます。 jQuery ではセル クリック イベントを自分で記述するか、存在しないため、利用できるセル クリック イベントがありません。

jQuery でハンドラーを設定する最も効率的な方法は、ターゲット フィルターを使用してテーブルにイベントを設定することです:

リーリー

利点は次のとおりです:

すべての行で 1 つのイベントのみが発生します
ページの変更時や再レンダリング時にイベントを追加する必要はありません
レンダリング関数のコードは最小限に抑えます

上記の Vue ソリューションは、jQuery を使用しないだけで、まったく同じことを行います。

したがって、コード サイズ (保守性) とパフォーマンスの両方の点で、これが Vue で動作させる最も効率的な方法だと思います。

DataTable では jQuery がグローバルにアクセスできる必要があるため、Vue コンポーネントでも使用でき、指定された jQuery ステートメントを

mounted フックに置くことができることに注意してください。コールバックで Vue ルーターにアクセスします。したがって、ルーターをグローバル スコープに入れて jQuery 側で使用する代わりに、Vue 側にすでに存在するオブジェクトを使用できます。 それでも、Vue コードに jQuery を混ぜる必要はないので、私はそれを避けて、上記の Vue のみのソリューションを使用します。