前々からテーブルの日付の表示が分かりにくい形になってしまっているのが気になっていまして。
今回はテーブル内の日付のフォーマットのやり方を調べてみようと思ったのですが、有効なものはまだ見つかっていません。
とりあえず今回のこの記事は、試してみたことのメモのような感じになります。
テーブル部分のコードはこのようになっています。
<v-data-table
:headers="headers"
:items="List"
@click:row="clickRow"
>
<!--v-data-tabelのitemsをslotに設定-->
<template slot="items" slot-scope="props">
<td class="text-xs-center">{{ props.item.id }}</td>
<td class="text-xs-center">{{ props.item.title }}</td>
<td class="text-xs-center">{{ props.item.name }}</td>
<td class="text-xs-center">{{ props.item.post_date }}</td>
<td class="text-xs-center">{{ props.item.content }}</td>
<td class="justify-center layout px-0">
</td>
</template>
</v-data-table>
以下は試してみたけどうまくいかなかった参考サイトです。
軽く調べて出てくるものは試したので、いよいよわからなくなってきました。
違いといえばpropsを使っていることでしょうか…？
これはそもそもの登録時の型やフォーマットの問題であって、登録済みのデータをフォーマットしてテーブル表示というのは難しいのかもしれません。
とりあえずどうしてもしなければというほどのことでもないので、次は登録済みデータの
削除機能の実装をやろうと思います。
この『VueでWEBアプリ』シリーズのコードをgithubで公開しています。参考までに。