Vue.jsで日付を表示するとUTC　2021-07-21T04:37:47.000000Z のようになる

LaravelとVueを勉強しています。
テーブルには日本標準時間で登録されているのですが、Vue.jsで表示すると、UTCの日付形式（例：2021-07-21T04:37:47.000000Z）になってしまいます。

これを、日本標準時間のまま、少しフォーマットを変えて表示する方法が分からず困っています。
アドバイスいただけますと幸いです。

テーブルはVue.jsのコンポーネントで表示しています。
テーブルの上に記載している日時は、レコードのcreated_atをphpのprintで記載してみました。

例えば、一番上は、「2021-05-20 23:19:41」に登録しましたが
vue.jsで表示しているテーブルでは、「2021-05-20T14:19:41.000000Z」となってしまいます。
これを、本来と同じ「2021-05-20 23:19:41」と表示したいです。

■Blade側　index.blade.php

@extends('layouts.admin_app')

@section('content')
<!-- Content Header (Page header) -->
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0 text-dark">商品一覧vue</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href={{ route('admin.index') }}>Home</a></li>
                    <li class="breadcrumb-item active">Product</li>
                </ol>
            </div>
        </div>
        <div class="mt-4 mb-2 col-md-2">
            <button type="button" onclick="location.href='{{ route('product.add') }}'" class="btn btn-block btn-info">新規作成</button>
        </div>
        <product-search
            :csrf='{{ json_encode(csrf_token()) }}'
            :categories='@json($categories)'
        >
        </product-search>
    </div>
</div>
<!-- /.content-header -->
<!-- Main content -->
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="table-responsive mb-4 p-4">
                        {{ $products->links('pagination::bootstrap-4') }}
                        <?php foreach($products as $product) {print($product->created_at . "|");} ?>
                        <product-list
                            :csrf='{{ json_encode(csrf_token()) }}'
                            :products='@json($products)'
                        >
                        </product-list>
                    </div>
                </div>
            </div>
        </div>
    </div><!-- /.container-fluid -->
</section>
<!-- /.main content -->
<!-- modal -->

<!-- /.modal -->
@endsection

@section('script')
    <script>
    </script>
@endsection

■テーブルのvueコンポーネント（product-listコンポーネント側） ProductList.vue

<template>
    <div>
        <table class="table table-hover text-sm" id="tbl_product">
            <thead>
                <tr>
                    <th></th>
                    <th></th>
                    <th>#</th>
                    <th class="wide">商品名</th>
                    <th>価格</th>
                    <th class="middle">詳細</th>
                    <th>有効/無効</th>
                    <th>Available</th>
                    <th>登録日</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(product, index) in table_products">
                    <td><button type="button" class="btn btn-pill btn-block btn-info largeModal" data-toggle="modal" data-target="#modal-lg" @click="productInout(product)">出入</button></td>
                    <td><button type="button" @click="productEdit(product.id, index)" class="btn btn-pill btn-block btn-warning">編集</button></td>
                    <td>{{ product.id }}</td>
                    <td>{{ product.name }}</td>
                    <td>{{ product.price }}</td>
                    <td>{{ product.description }}</td>
                    <td>{{ product.yuko_flg == 0 ? '無効' : '有効' }}</td>
                    <td>{{ product.stocks.avairable }}</td>
                    <td>{{ product.created_at }}</td>
                </tr>
            </tbody>
        </table>
        <admin-product-inout-modal
            :csrf='csrf'
            :product='target_product'
        >
        </admin-product-inout-modal>
    </div>
</template>
<script>
    import AdminProductInoutModal from '../molecule/AdminProductInoutModal.vue';
    
    export default {
        components: {
            'admin-product-inout-modal': AdminProductInoutModal,
        },
        props: {
            csrf: {
                type: String,
            },
            products: {
                type: Object,
            }
        },
        data() {
            return {
                table_products: this.products.data,
                target_product: null,
            }
        },
        mounted() {
            console.log(this.products.data);
        },
        methods: {
            productEdit: function(id, index) {
                console.log(id + ":" + index);
                console.log(this.table_products[0]);
                var format_date = this.table_products[0].created_at.toLocaleString();
                console.log("日付テスト" + format_date);
                location.href= '/admin/product/edit/' + id;
            },
            productInout: function(product) {
                
                this.target_product = product;
                console.log(this.target_product);
            }
        },
        watch: { //watchしている変数に変更があったら動く
            table_products: {
                handler(value) { //table_productsに入ってきた値がvalueに入る
                    this.target_product = value[0];
                },
                immediate: true, //watchの実行タイミングの設定。true:1回目以降　false:2回目以降
            }
        },
    }
</script>

vue.jsで日付のフォーマット変更にはmoment.jsがよくつかわれるというのも見ましたが、
そのようなライブラリを使う必要があるのでしょうか。。？

何卒、よろしくお願いいたします。

行動規範の内容に同意します

回答2件

Laravel 側で日時をフォーマットする。
Vueでライブラリを用いてフォーマットする。

の二つの方法で解決できるかと思います。

個人的には data-fns が楽ですきです。

JavaScript
1
2format(new Date(2021, 7, 23), 'yyyy年MM月dd日')
3// '2021年07月23日'

投稿2021/07/23 13:53

kai0310

総合スコア2076

mikeko0901

2021/07/24 07:35

ありがとうございます。data-fnsを調べてみます！

行動規範の内容に同意します

ベストアンサー

質問者さんがご推察されている通り、こういった場合通常は日付ライブラリを使います。

ただし、moment.jsは開発が終了しており、公式からも代替ライブラリへの移行が推奨されている通り新規開発では使用しません。
代替ライブラリには、moment.jsライクであるDay.jsやdate-fns等があります。

例えばDay.jsを使用した場合は以下のように実装することができます。

Vue
1<template>
2  <!-- 前略 -->
3  <tbody>
4    <tr v-for="(product, index) in table_products">
5      <td><button type="button" class="btn btn-pill btn-block btn-info largeModal" data-toggle="modal" data-target="#modal-lg" @click="productInout(product)">出入</button></td>
6      <td><button type="button" @click="productEdit(product.id, index)" class="btn btn-pill btn-block btn-warning">編集</button></td>
7      <td>{{ product.id }}</td>
8      <td>{{ product.name }}</td>
9      <td>{{ product.price }}</td>
10      <td>{{ product.description }}</td>
11      <td>{{ product.yuko_flg == 0 ? '無効' : '有効' }}</td>
12      <td>{{ product.stocks.avairable }}</td>
13      <td>{{ formatDate(product.created_at) }}</td>
14    </tr>
15  </tbody>
16  <!-- 後略 -->
17</template>
18
19<script>
20import dayjs from 'dayjs'
21
22export default {
23  // 前略
24  methods: {
25    formatDate: dateStr => dayjs(dateStr).format('YYYY年MM月DD日')
26  }
27  // 後略
28}
29</script>

頻繁に使用するようであれば、関数として切り出して以下のようにしてもいいですし

Vue
1<template>
2  <!-- 前略 -->
3  <tbody>
4    <tr v-for="(product, index) in table_products">
5      <td><button type="button" class="btn btn-pill btn-block btn-info largeModal" data-toggle="modal" data-target="#modal-lg" @click="productInout(product)">出入</button></td>
6      <td><button type="button" @click="productEdit(product.id, index)" class="btn btn-pill btn-block btn-warning">編集</button></td>
7      <td>{{ product.id }}</td>
8      <td>{{ product.name }}</td>
9      <td>{{ product.price }}</td>
10      <td>{{ product.description }}</td>
11      <td>{{ product.yuko_flg == 0 ? '無効' : '有効' }}</td>
12      <td>{{ product.stocks.avairable }}</td>
13      <td>{{ formatDate(product.created_at) }}</td>
14    </tr>
15  </tbody>
16  <!-- 後略 -->
17</template>
18
19<script>
20import { formatDate } from '@/libs'
21
22export default {
23  // 前略
24  methods: {
25    formatDate
26  }
27　// 後略
28}
29</script>

インスタンスプロパティに追加してもよいと思います

Vue
1<template>
2  <!-- 前略 -->
3  <tbody>
4    <tr v-for="(product, index) in table_products">
5      <td><button type="button" class="btn btn-pill btn-block btn-info largeModal" data-toggle="modal" data-target="#modal-lg" @click="productInout(product)">出入</button></td>
6      <td><button type="button" @click="productEdit(product.id, index)" class="btn btn-pill btn-block btn-warning">編集</button></td>
7      <td>{{ product.id }}</td>
8      <td>{{ product.name }}</td>
9      <td>{{ product.price }}</td>
10      <td>{{ product.description }}</td>
11      <td>{{ product.yuko_flg == 0 ? '無効' : '有効' }}</td>
12      <td>{{ product.stocks.avairable }}</td>
13      <td>{{ $dayjs(product.created_at).format('YYYY年MM月DD日') }}</td>
14    </tr>
15  </tbody>
16  <!-- 後略 -->
17</template>