vue.jsとなかよくなろう：日本時間の表示にFilterを使ってmomentを利用

こんにちは、みみです。

先日アップしたこのサイトのテーマですが、トップのREST APIのところの日付が~~GMT~~ ISO形式のままだった事にやっと気がついてしれっと修正したのでそのメモです。

Vueとは関係なくまず moment.jsという素敵なライブラリがMITであって、それをvueに使える vue-moment というのもあるのですが、このサイトでは今の処VueをCDNで使っているので moment.jsもCDNで引っ張ってきて使ってみました。

この一覧から使いたいタイムゾーンのCDNのURLをコピー。現時点のバージョンの日本版だとこれ。

https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/locale/ja.js

これを読み込ませて、vueの方にFilter化して使います。

Vue の Filter を使ってみましょう

そうです。Filterです。Array.filter()じゃないよ！

Vue.js では、一般的なテキストフォーマットを適用するために使用できるフィルタを定義できます
https://jp.vuejs.org/v2/guide/filters.html

え、やだVueめっちゃお利口さん…ってなりませんでしたこの機能？あれ私だけ？なんか、こういう端から重箱の角が整ってる感じがぐっときません？

つまり、

filters: {
        moment: function (date) {
            return moment(date).format('YYYY/MM/DD HH:mm');// eslint-disable-line
        }
    }

というふうに書いておいたら、

{{post.date| moment}}

と書けば変換してくれるのです。すばらしい。

先の vue-moment はこのFilterを書かなくても直でMustacheに書くだけで動くようにしたやつぽいですね。多分。

というわけで、以前の記事で紹介したgistの適当コードも修正しておきましたので良かったらご覧ください。

ここではインスタンスの中に書いていますが、グローバルでフィルタを定義することもできます。

参照：

Vue.jsで日付処理ライブラリMoment.jsを使う | webOpixel