はじめに

データの加工をする時にVue.jsで独自のfilterを実装して、使い回すことがあるので、今後のメモとして残します。自分用のメモなので、簡易的に書きます。ご了承くださいませ。

filterの作成(テンプレ）

filter.js

export function filterA (value) {
  return value; // 独自のfilter処理
}
export function filterB (value) {
  return value; // 独自のfilter処理
}
export function filterC (value) {
  return value; // 独自のfilter処理
}

filterの作成(自分が今後使いそうなもの？）

filter.js

export function filterA (value) {
  return Math.floor(value); // 小数点以下を切り捨てる
}
export function filterB (value) {
  return value.toLocaleString(); // 数字を3桁カンマ区切りにする
}
export function filterC (value) {
  return Number(value).toLocaleString(); // String型の数字を3桁カンマ区切りにする
}

モジュールをインポート

main.js

import * as filters from './filter' // 相対または絶対パス名で指定

Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key]);
});

filter.jsのファイルに記述してあるモジュールのコンテンツすべてをインポートする。
次に、filter.jsで作成した関数をforEachメソッドを使用して、グローバルなVue.filterを使って、1つずつ登録してあげる。

基本構文（例）

Hoge.vue


{{ number | filterA }}

最後に、上記のように式の終わりに任意のフィルタを追加し、パイプ(‘|’)シンボルを使って記述してあげればコンポーネントの中で使用することができます。以上になります。

また、下記のようにパイプシンボルで繋げてあげれば、複数のフィルタを使用することもできます。

Hoge.vue


{{ number | filterA | filterB }}

おわりに

今回の記事の内容に誤り等ありましたら、お手数ですがご指摘いただけるとありがたいです。よろしくお願いいたします。

参考資料

Vue.js 公式
 JavaScript MDN
Vue.js 独自のfilterを実装する