vuejs3 vuetify vdatatableにおいて、各行各列ごとに処理をする vdatatable vuejs3

vuejs3 vuetify vdatatableにおいて、各行各列ごとに処理をする

■ポイント
・:items="data" でうけると、各行は item に展開される。 for みたいなのはいらない。自動でやってくれる
・item.columns.列名 で指定する。（versionかわって、columns もいるようになったのかな？）

■内容
・イベント列の値が close だったら文字を赤色にする

<template>
<v-data-table :headers="headers" :items="data" item-value="id" class="elevation-1">
<template v-slot:item="{ item }">
<tr>
<td>
<div v-if="item.columns.event == 'close'" style="color:red">
{{ item.columns.event }}
</div>
<div v-else>
{{ item.columns.event }}
</div>
</td>

</tr>
</template>
</v-data-table>
</template>