[解決済み] Vueコンポーネントで通貨をフォーマットするには？

質問

私のVueコンポーネントは次のようなものです。

<template>
    <div>
        <div class="panel-group"v-for="item in list">
            <div class="col-md-8">
                <small>
                   Total: <b>{{ item.total }}</b>
                </small>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        ...
        computed: {
            list: function() {
                return this.$store.state.transaction.list
            },
            ...
        }
    }
</script>

の結果は {{ item.total }} は

26000000

しかし、私はそれがこのようになるようにフォーマットしたい。

26.000.000,00

jqueryやjavascriptで、できます。

しかし、Vueコンポーネントでそれを行うにはどうすればよいですか？

どのように解決するのですか？

UPDATE: @Jess によって提供された、フィルタを使った解決策を使うことをお勧めします。

私なら、そのためのメソッドを書いて、価格をフォーマットする必要があるところでは、テンプレートにメソッドを置いて、値を下に渡すだけです。

methods: {
    formatPrice(value) {
        let val = (value/1).toFixed(2).replace('.', ',')
        return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".")
    }
}

そして、テンプレートで

<template>
    <div>
        <div class="panel-group"v-for="item in list">
            <div class="col-md-8">
                <small>
                   Total: <b>{{ formatPrice(item.total) }}</b>
                </small>
            </div>
        </div>
    </div>
</template>

ちなみに - 置き換えや正規表現にはあまり気を遣っていません。改善されるかもしれません。 enter code here

Vue.filter('tableCurrency', num => {
  if (!num) {
    return '0.00';
  }
  const number = (num / 1).toFixed(2).replace(',', '.');
  return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
});