vue.jsのfilterをthisから呼び出す

2020-2-19

テキストを変換する処理を切り分けられるので可読性も上がって便利なfilter。

公式 (https://jp.vuejs.org/v2/guide/filters.html) では

{{ message | capitalize }} <div v-bind:id="rawId | formatId"></div>

のmustache展開とv-bind式の二種のみの使い方しか紹介していない。 実はmethod内等から呼び出して使いたい場合は

this.$options.filters.capitalize(this.message) this.$options.filters.formatId(this.rawId)

のようにthis.$options.filtersから呼び出せる。

nuxtjsだとhead()内などで呼び出したいこともあると思う。

意外と日本語で記載している記事を見かけなかったので一応メモ。