LaravelからInertia.jsを使ってVue3で日付を表示するときの変換

Laravelモデルのcreated_atやupdated_atといった日付をVue3で表示するとき、"2023/7/6 10:11:48"といった形式にする場合の手順です。

何もしない場合の表示

Vue3で表示するデータを::all()で取得してInertia::renderで返します。

public function index(): Response 
{
    return Inertia::render('ItemCategory/Index', [
        'item_categories' => ItemCategory::all(),
    ]);
}

Vue3側のコードは次のとおりです。

  <template>
  <div>
    <tbody>
      <tr v-for=" category in item_categories" :key="category.id">
        <td>
                {{category.created_at }}
        </td>
        <td>
                {{category.updated_at }}
        </td>
    </tr>
  </div>
  </template>
  
  <script>
  export default {
    :
    props: {
      item_categories: Object,
    },
    :

データのVue3側でcreated_at, updated_atを表示すると、日時が次のようにISO8061のフォーマットで表示されます。

2023-07-06T01:11:48.000000Z

日付の形式を変換

Vue3のtemplateでcreated_at, updated_atの表示部分をDate().toLocaleString()を使って加工します。

  <template>
  <div>
    <tbody>
      <tr v-for=" category in item_categories" :key="category.id">
        <td>
                {{new Date(category.created_at).toLocaleString() }}
        </td>
        <td>
                {{new Date(category.updated_at).toLocaleString() }}
        </td>
    </tr>
  </div>
  </template>
  
  <script>
  export default {
    :
    props: {
      item_categories: Object,
    },
    :

日付の形式が変換され、次のように表示されます。

2023/7/6 10:11:48