vuejsのテーブル行にイベントを置く

Question

こんにちは私はこの質問への簡単な答えを探していますが、私はこれのように見える私のvueアプリケーションのためのspatieテーブルプラグインを見つけることができないようです。

   <table-component id="table1" :data="[ 
             { firstName: 'John', birthday: '04/10/1940', songs: 72 }, 
             { firstName: 'Paul', birthday: '18/06/1942', songs: 70 }, 
             { firstName: 'George', birthday: '25/02/1943', songs: 22 }, 
             { firstName: 'Ringo', birthday: '07/07/1940', songs: 2 }, 
             ]" sort-by="songs" sort-order="asc"> 
        <table-column show="firstName" label="First name"></table-column> 
        <table-column show="songs" label="Songs" data-type="numeric"></table-column> 
        <table-column show="birthday" label="Birthday" :filterable="false" data-type="date:DD/MM/YYYY"></table-column> 
       </table-component> 

は、私はあなたがテーブルの行をクリックしたとき、それは別のページに私のルータをプッシュし、次のルータのページ

this.$router.push('/analytic-one'); 

任意のヘルプやアドバイスにテーブル行情報を渡すというメソッドを作成したいですどうもありがとうございます。

Answer 1

これを解決する方法がいくつかあります。

しかし、クリックすると、この質問の後に更新されたspatieテーブルコンポーネントのDocumentationが表示されます。

@rowClick：行がクリックされたときに発生する

表成分は、現在、1つのカスタムイベントを発します。行データをイベントペイロードとして受信します。

行データをペイロードに返されることを教えてくれる

ので、私たちは

<table-component @rowClick="myHandlerMethod" .... 

そして、我々の方法で

methods: { 
    myHandlerMethod: function (clickedItem) { 
     console.log(clickedItem) 
    } 
} 

そして新しいにデータを送信するためのオブジェクトを行うことができますページでは、さまざまな方法でそれを解決することができます。

テーブル行をクリックした後にテーブル情報を一時的に保存してから、新しいページにルータをプッシュして、再びvuex状態からデータをフェッチすることができます。

$router.push('route?artistId=' + clickedItem.id)のようなものを使用して、ユーザーが新しいページに移動したときに再びその列のデータをフェッチするajax呼び出しを行うことができます。 （これは擬似コードで、変数をルートにバインドする適切な方法についてvueルーターを調べます）。これは、データセットにIDがあることを前提としています。

代わりにモーダルを使用することもできますが、クリックハンドラで this.selectedItem = clickedItemのような処理を行うことができます。

あなたには一般的な方向性があります。