WP-REST-APIで投稿日付を取得したい

Question

前提・実現したいこと

nuxt.jsを使用しサイトを構築しております。
axiosを使用し、Wordpressの記事一覧を表示するコンポーネントを制作しています。
記事一覧の中にそれぞれの記事を投稿した日付を記載したいのですが、
WP-REST-APIでJSONの中身を見ると投稿日時を表すデータ部分に

date:"2018-09-04T14:57:36"

このように日付と時刻が書かれており、

<p>投稿日</p> <time :datetime="post.date">{{post.date}}</time>

上記を記述すると、
投稿日
2018-09-04T14:57:36

と表示されます。

こちらを下記のように時刻を無くし、日付のみ表示する方法はありますでしょうか？

投稿日
2018-09-04

発生している問題・エラーメッセージ

投稿日
2018-09-04T14:57:36

上記のように日付と時刻が表示されてしまう

該当のソースコード

<article>
  <h2 class="title">{{ post.title.rendered }}</h2>
  <p>投稿日</p>
  <time :datetime="post.date">{{post.date}}</time>
  <figure><img :src="post._embedded['wp:featuredmedia'][0].source_url" alt=""></figure>
</article>

Answer 1

Vueのフィルター機能を使うとスマートに表示できると思います。
日付操作はライブラリを入れるとやりやすいのでdayjsなどを入れることをオススメします。
下記のフィルター記述をreturn value.slice(0, 10)（文頭10文字を抜き出す）としても同じ結果は得られますが、後学のために日付操作の方法を覚えたほうが良いでしょう。

<template>
  <article>
    <time :datetime="post.date">{{ post.date | dateFilter }}</time>
  </article>
</template>

<script>
import dayjs from 'dayjs'

export default {
  filters: {
    dateFilter(value) {
      return dayjs(value).format('YYYY-MM-DD')
    }
  }
}
</script>

Comments

[aya_rin]

こちらの方法でも表示できました。
ご教示いただきありがとうございました！

Answer 2

nuxt-community/moment-moduleを利用するのが良いと思います。

moment('2018-09-04T14:57:36').format('YYYY-MM-DD')

といった書き方でフォーマットできます。

https://codepen.io/yuhigash/pen/GRKMRVP?&editable=true&editors=101

Comments

[aya_rin]

pluginsフォルダ内にfilters.jsを作り、momentをimportし、コードペンの内容を記述したら無事反映できました！ありがとうございました！