Vue filterで表示テキストなどをフォーマット

Vue.jsのfilterが便利だった。

jp.vuejs.org

Railsのhelperみたいな感じ

Railsのhelperみたいな感じで、filterを定義すれば渡された値に対して処理を加えてその結果を返す。モデルから渡されたテキストをそのまま表示するのではなく、ちょいユーザーの見やすい形にフォーマットして表示したいときとかに重宝しそう。

例えば、APIから返ってくる日付情報が 2019-02-03T12:12:57.134Zだったとして、これをviewに表示するとなると、ちょい味気がない。そこでVueのfilterの出番。

以下のような感じ。

// 日付の変換処理にはdate-fnsというライブラリを使ってみた
import format from 'date-fns/format'

export default {
  filters: {
    dateFormatter: function (date) {
      return format(date, 'YYYY/MM/DD')
    }
  },
...
}

これで、dateFomatterという関数が出来る。入力値は{{ }}の中身をパイプで区切って左側に置いておけば、引数として読み取ってくれる。

<small>{{ date | dateFormatter }}</small>

※ モデルから取得したデータ以外にも、inputタグに入力された値に対してフィルター処理を加えた結果を表示するのにも便利。 ※ 公式のドキュメントにもあるように、入力値を関数から関数に受け渡すことも出来るし、複数引数を渡すことも可能。

ただ、複数引数を渡すとき、

{{ message | filterA('arg1', arg2) }}

みたいになるらしい。だけど、直感的に見て一瞬どれが引数だよ？ってなりそう。{{ (message, 'arg1', arg2) | filterA }}みたいに出来ないのか？と思ったけど。。。

とはいえ、良さげな変換ライブラリと組み合わせれば、Railsのhelperみたいに便利なフィルターを定義できるのは素晴ら。