Vuetify Data Table 行のクリックイベントを検知する
Vuetify APIvdatatable This article explains how to detect a row click event using Vuetify's Data Table API vdatatable. It also describes how to prevent event propagation by placing checkboxes in data tables.
by JanitorOct 08, 2023
VuetifyのData Table API「v-data-table」で行のクリックイベントを検知する方法です。データテーブル内にチェックボックスを設置してイベントの伝播を阻止する方法に関しても記載しています。
VuetifyのData Table API「v-data-table」で行のクリックイベントを検知する方法です。データテーブル内にチェックボックスを設置してイベントの伝播を阻止する方法に関しても記載しています。
Jump Links
1. スクリプトを書く
1. スクリプトを書く
1. スクリプトを書く
この記事で使っているテーブルは下記URLの記事で作成したテーブルにクリックイベントを追加したものです。
https://comytom.com/anarticle/1aa0f774-2f7b-47ad-992a-17a695508496
この記事で使っているテーブルは下記URLの記事で作成したテーブルにクリックイベントを追加したものです。
https://comytom.com/anarticle/1aa0f774-2f7b-47ad-992a-17a695508496
<script setup>
var itemsPerPage = -1;
var headers = [
{ title: 'title0', align: 'start', key: 'key0' },
{ title: 'title1', align: 'start', key: 'key1' },
{ title: 'title2', align: 'start', key: 'key2' },
]
var objArr = reactive( { value: [
{ key0: "000", key1: "aaa", key2: "", cbValues: [] },
{ key0: "001", key1: "bbb", key2: "", cbValues: [ false ] },
{ key0: "002", key1: "ccc", key2: "", cbValues: [ true, false ] },
] } );
var handleRowClick = ( e, select ) => {
console.log( select.item.selectable );
}
watch( objArr, async ( after, before ) => {
console.log( objArr );
} );
</script>
<template>
<VDataTable
v-model:items-per-page="itemsPerPage"
:headers="headers"
:items="objArr.value"
@click:row="handleRowClick"
class="elevation-1 dataTableStyle">
<template v-slot:item.key2="item">
<div :class="[ objArr.value[ item.index ].cbValues.some( ( element ) => element == true ) ? 'BGRed' : '' ]">
<span v-for="( cbValue, cbindex ) in objArr.value[ item.index ].cbValues"
style="display: inline-block; width: fit-content;">
<v-checkbox-btn
:label="'CB' + item.index + '_' + cbindex"
v-model="objArr.value[ item.index ].cbValues[ cbindex ]"
@click.stop=''>
</v-checkbox-btn>
</span>
</div>
</template>
</VDataTable>
</template>
<style>
.dataTableStyle th {
background-color: #FFFFFF00 !important;
font-weight: bold !important;
color: #8CF786 !important;
}
.dataTableStyle td {
background-color: #FFFFFF00 !important;
padding-right: 0px !important;
}
.dataTableStyle thead {
background-color: #216E4B !important;
}
.dataTableStyle tbody tr:nth-child(odd) {
background-color: #FFFFFF; /* 奇数行の背景色 */
}
.dataTableStyle tbody tr:nth-child(even) {
background-color: #f9ffd1; /* 偶数行の背景色 */
}
.dataTableStyle .v-data-table-footer {
background-color: #FFFFFF;
color: #B53430;
font-weight: bold;
}
.BGRed{
background-color: #ffc5ba;
}
</style>
<script setup>
var itemsPerPage = -1;
var headers = [
{ title: 'title0', align: 'start', key: 'key0' },
{ title: 'title1', align: 'start', key: 'key1' },
{ title: 'title2', align: 'start', key: 'key2' },
]
var objArr = reactive( { value: [
{ key0: "000", key1: "aaa", key2: "", cbValues: [] },
{ key0: "001", key1: "bbb", key2: "", cbValues: [ false ] },
{ key0: "002", key1: "ccc", key2: "", cbValues: [ true, false ] },
] } );
var handleRowClick = ( e, select ) => {
console.log( select.item.selectable );
}
watch( objArr, async ( after, before ) => {
console.log( objArr );
} );
</script>
<template>
<VDataTable
v-model:items-per-page="itemsPerPage"
:headers="headers"
:items="objArr.value"
@click:row="handleRowClick"
class="elevation-1 dataTableStyle">
<template v-slot:item.key2="item">
<div :class="[ objArr.value[ item.index ].cbValues.some( ( element ) => element == true ) ? 'BGRed' : '' ]">
<span v-for="( cbValue, cbindex ) in objArr.value[ item.index ].cbValues"
style="display: inline-block; width: fit-content;">
<v-checkbox-btn
:label="'CB' + item.index + '_' + cbindex"
v-model="objArr.value[ item.index ].cbValues[ cbindex ]"
@click.stop=''>
</v-checkbox-btn>
</span>
</div>
</template>
</VDataTable>
</template>
<style>
.dataTableStyle th {
background-color: #FFFFFF00 !important;
font-weight: bold !important;
color: #8CF786 !important;
}
.dataTableStyle td {
background-color: #FFFFFF00 !important;
padding-right: 0px !important;
}
.dataTableStyle thead {
background-color: #216E4B !important;
}
.dataTableStyle tbody tr:nth-child(odd) {
background-color: #FFFFFF; /* 奇数行の背景色 */
}
.dataTableStyle tbody tr:nth-child(even) {
background-color: #f9ffd1; /* 偶数行の背景色 */
}
.dataTableStyle .v-data-table-footer {
background-color: #FFFFFF;
color: #B53430;
font-weight: bold;
}
.BGRed{
background-color: #ffc5ba;
}
</style>
VDataTableタグに「@click:row="handleRowClick"」を記載しています。これで、行がクリックされたら「handleRowClick」が実行されます。2番目の引数（上のスクリプトでは、select）にVDataTableの行のオブジェクトが入っていますので、どの行がクリックされたか判別ができます。
v-checkbox-btnタグに「@click.stop=''」を記載しているのは、チェックボックスへの入力時にはイベントの伝播を阻止して「handleRowClick」を実行させないためです。
参考にさせて頂いたウェブサイトURL
https://stackoverflow.com/questions/51000149/vuetify-checkbox-how-to-stop-the-click-event
https://ja.vuejs.org/guide/essentials/event-handling.html#event-modifiers
VDataTableタグに「@click:row="handleRowClick"」を記載しています。これで、行がクリックされたら「handleRowClick」が実行されます。2番目の引数（上のスクリプトでは、select）にVDataTableの行のオブジェクトが入っていますので、どの行がクリックされたか判別ができます。
v-checkbox-btnタグに「@click.stop=''」を記載しているのは、チェックボックスへの入力時にはイベントの伝播を阻止して「handleRowClick」を実行させないためです。
参考にさせて頂いたウェブサイトURL
https://stackoverflow.com/questions/51000149/vuetify-checkbox-how-to-stop-the-click-event
https://ja.vuejs.org/guide/essentials/event-handling.html#event-modifiers
Vuetify Data Table 行のクリックイベントを検知する
Vuetify APIvdatatable This article explains how to detect a row click event using Vuetify's Data Table API vdatatable. It also describes how to prevent event propagation by placing checkboxes in data tables.
by JanitorOct 08, 2023
VuetifyのData Table API「v-data-table」で行のクリックイベントを検知する方法です。データテーブル内にチェックボックスを設置してイベントの伝播を阻止する方法に関しても記載しています。
VuetifyのData Table API「v-data-table」で行のクリックイベントを検知する方法です。データテーブル内にチェックボックスを設置してイベントの伝播を阻止する方法に関しても記載しています。
Jump Links
1. スクリプトを書く
1. スクリプトを書く
1. スクリプトを書く
この記事で使っているテーブルは下記URLの記事で作成したテーブルにクリックイベントを追加したものです。
https://comytom.com/anarticle/1aa0f774-2f7b-47ad-992a-17a695508496
この記事で使っているテーブルは下記URLの記事で作成したテーブルにクリックイベントを追加したものです。
https://comytom.com/anarticle/1aa0f774-2f7b-47ad-992a-17a695508496
<script setup>
var itemsPerPage = -1;
var headers = [
{ title: 'title0', align: 'start', key: 'key0' },
{ title: 'title1', align: 'start', key: 'key1' },
{ title: 'title2', align: 'start', key: 'key2' },
]
var objArr = reactive( { value: [
{ key0: "000", key1: "aaa", key2: "", cbValues: [] },
{ key0: "001", key1: "bbb", key2: "", cbValues: [ false ] },
{ key0: "002", key1: "ccc", key2: "", cbValues: [ true, false ] },
] } );
var handleRowClick = ( e, select ) => {
console.log( select.item.selectable );
}
watch( objArr, async ( after, before ) => {
console.log( objArr );
} );
</script>
<template>
<VDataTable
v-model:items-per-page="itemsPerPage"
:headers="headers"
:items="objArr.value"
@click:row="handleRowClick"
class="elevation-1 dataTableStyle">
<template v-slot:item.key2="item">
<div :class="[ objArr.value[ item.index ].cbValues.some( ( element ) => element == true ) ? 'BGRed' : '' ]">
<span v-for="( cbValue, cbindex ) in objArr.value[ item.index ].cbValues"
style="display: inline-block; width: fit-content;">
<v-checkbox-btn
:label="'CB' + item.index + '_' + cbindex"
v-model="objArr.value[ item.index ].cbValues[ cbindex ]"
@click.stop=''>
</v-checkbox-btn>
</span>
</div>
</template>
</VDataTable>
</template>
<style>
.dataTableStyle th {
background-color: #FFFFFF00 !important;
font-weight: bold !important;
color: #8CF786 !important;
}
.dataTableStyle td {
background-color: #FFFFFF00 !important;
padding-right: 0px !important;
}
.dataTableStyle thead {
background-color: #216E4B !important;
}
.dataTableStyle tbody tr:nth-child(odd) {
background-color: #FFFFFF; /* 奇数行の背景色 */
}
.dataTableStyle tbody tr:nth-child(even) {
background-color: #f9ffd1; /* 偶数行の背景色 */
}
.dataTableStyle .v-data-table-footer {
background-color: #FFFFFF;
color: #B53430;
font-weight: bold;
}
.BGRed{
background-color: #ffc5ba;
}
</style>
<script setup>
var itemsPerPage = -1;
var headers = [
{ title: 'title0', align: 'start', key: 'key0' },
{ title: 'title1', align: 'start', key: 'key1' },
{ title: 'title2', align: 'start', key: 'key2' },
]
var objArr = reactive( { value: [
{ key0: "000", key1: "aaa", key2: "", cbValues: [] },
{ key0: "001", key1: "bbb", key2: "", cbValues: [ false ] },
{ key0: "002", key1: "ccc", key2: "", cbValues: [ true, false ] },
] } );
var handleRowClick = ( e, select ) => {
console.log( select.item.selectable );
}
watch( objArr, async ( after, before ) => {
console.log( objArr );
} );
</script>
<template>
<VDataTable
v-model:items-per-page="itemsPerPage"
:headers="headers"
:items="objArr.value"
@click:row="handleRowClick"
class="elevation-1 dataTableStyle">
<template v-slot:item.key2="item">
<div :class="[ objArr.value[ item.index ].cbValues.some( ( element ) => element == true ) ? 'BGRed' : '' ]">
<span v-for="( cbValue, cbindex ) in objArr.value[ item.index ].cbValues"
style="display: inline-block; width: fit-content;">
<v-checkbox-btn
:label="'CB' + item.index + '_' + cbindex"
v-model="objArr.value[ item.index ].cbValues[ cbindex ]"
@click.stop=''>
</v-checkbox-btn>
</span>
</div>
</template>
</VDataTable>
</template>
<style>
.dataTableStyle th {
background-color: #FFFFFF00 !important;
font-weight: bold !important;
color: #8CF786 !important;
}
.dataTableStyle td {
background-color: #FFFFFF00 !important;
padding-right: 0px !important;
}
.dataTableStyle thead {
background-color: #216E4B !important;
}
.dataTableStyle tbody tr:nth-child(odd) {
background-color: #FFFFFF; /* 奇数行の背景色 */
}
.dataTableStyle tbody tr:nth-child(even) {
background-color: #f9ffd1; /* 偶数行の背景色 */
}
.dataTableStyle .v-data-table-footer {
background-color: #FFFFFF;
color: #B53430;
font-weight: bold;
}
.BGRed{
background-color: #ffc5ba;
}
</style>
VDataTableタグに「@click:row="handleRowClick"」を記載しています。これで、行がクリックされたら「handleRowClick」が実行されます。2番目の引数（上のスクリプトでは、select）にVDataTableの行のオブジェクトが入っていますので、どの行がクリックされたか判別ができます。
v-checkbox-btnタグに「@click.stop=''」を記載しているのは、チェックボックスへの入力時にはイベントの伝播を阻止して「handleRowClick」を実行させないためです。
参考にさせて頂いたウェブサイトURL
https://stackoverflow.com/questions/51000149/vuetify-checkbox-how-to-stop-the-click-event
https://ja.vuejs.org/guide/essentials/event-handling.html#event-modifiers
VDataTableタグに「@click:row="handleRowClick"」を記載しています。これで、行がクリックされたら「handleRowClick」が実行されます。2番目の引数（上のスクリプトでは、select）にVDataTableの行のオブジェクトが入っていますので、どの行がクリックされたか判別ができます。
v-checkbox-btnタグに「@click.stop=''」を記載しているのは、チェックボックスへの入力時にはイベントの伝播を阻止して「handleRowClick」を実行させないためです。
参考にさせて頂いたウェブサイトURL
https://stackoverflow.com/questions/51000149/vuetify-checkbox-how-to-stop-the-click-event
https://ja.vuejs.org/guide/essentials/event-handling.html#event-modifiers