はじめに
データの加工をする時に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 }}
おわりに
今回の記事の内容に誤り等ありましたら、お手数ですがご指摘いただけるとありがたいです。よろしくお願いいたします。