最終更新日から90日以上経過しています。
探したけど見つからなかったので解説記事が見つからなかったのでシェアします。正確には解説記事は見つかりませんでしたが、公式ドキュメントの方には近い内容がありました。
環境
各ライブラリ等のバージョンは以下の通りです。
- vue/cli：4.1.2
- vue：2.6.11
- vuetify：2.2.3
前回Vue.jsとVuetifyでTODOリストを作った際のコードをベースとした記事になりますので、TODOリスト描画部分のコードの詳細は下記の記事を参照ください。
やりたいこと
Vuetifyのv-data-tableを使用して作ったグリッドの任意の行をクリックしたとき、クリックした行を判定する。
クリック行を判定するコード
概要
v-data-tableの定義部分で、@click:row属性でクリックイベントを定義します。
<v-data-table :headers="headers" :items="items" :items-per-page="5" class="elevation-1" @click:row="clickRow" >
クリック時に呼び出されるclickRow関数は以下のように定義します。
methods: {
/** 省略 **/
clickRow: function(item) {
const selected = this.items.indexOf(item);
alert((selected + 1) + "行目をクリックしました。");
}
}
解説
ポイントとしては以下2点でしょうか。
- クリックイベントの引数に、クリックした行のオブジェクト（item）が渡される。
- v-data-tableにmodelとして渡している配列（items）のindexOfでオブジェクトのindexを取得する。
上記の方法は、公式ドキュメントによるv-data-tableの解説内のCRUD操作のコードでこのようにクリック行を判定している事を参考にしています。
editItem (item) {
this.editedIndex = this.desserts.indexOf(item)
this.editedItem = Object.assign({}, item)
this.dialog = true
},
