【vue】 Vueインスタンスの出力結果を調整したい

はじめに

フロント側からAPIでサーバ側から情報取得する際に、取得データの日時がunixタイムで、このunixタイムをフロントで受けたときに、画面に表示したい場合の方法をメモします。

内容

結論

filtersプロパティを使う。

詳細

<template>
    <div v-for="list in lists"> <!-- ←適当にv-forでぶん回して要素を持ってくる -->
        <p>
            {{ list.datetime | datetime }}
        </p>
    </div>
</template>
<script>
export default ({
    filters: {
        // 以下でunixタイムをフォーマットするようにする
        datetime: function(unixtime) {
            // フォーマット処理
        }
    }
})
</script>

上記のように、templateの内部のhtml要素に、変換したいものと実行したい関数をパイプで結ぶ。

filters はVueインスタンスの出力結果を調整するのに使います。
|(パイプ) で区切ることで呼び出せます。

ただし、構成によっては不必要に呼ばれる場合などあるので
computedプロパティの中で定義してもいいと思います。

<script>
export default ({
    computed: {
        // 以下でunixタイムをフォーマットするようにする
        datetime(unixtime) {
            // フォーマット処理
        }
    }
})
</script>

以上。