Vue.js でinputに入力された値を3桁ごとにカンマ区切りにしたい

Question

<div id="app">
 <input type="text" class="price-area">
</div>

このinputへ数値を入力されたら、3桁ごとにカンマが挟まれるように設定したいです。
例）× 19800 => ○19,800

カスタムフィルターを使うのかなぁと思ってはいるのですが、inputへ反映させる方法が全くわかりません。。
ご教授のほど、よろしくお願い致します。

Answer 1

「コンポーネントのデータのうち、特定のプロパティが変更された場合に何かしたい」というのは、コンポーネントのwatchプロパティ(参考リンク)を利用して実現できます。

<div id="app">
    <input type="text" v-model="price" class="price-area" />
</div>

new Vue({
    el: '#app'
    data() {
        return {
            price: 0 // 初期値
        }
    },
    watch: {
        // watchで監視したいプロパティ名は、
        // dataのプロパティ名と一致させてください
        price(oldVal, newVal) {
            // oldVal: 変更前の値 -> 間違い。こっちがnewVal(追記参照)
            // newVal: 変更後の値 -> 間違い。こっちがoldVal(追記参照)
            // returnしたものが最終的にpriceとして設定・利用される -> 間違い(追記参照)
        }
    }
});

追記(2018/11/28)

時間がたってしまっているのですが、間違ったことを書いていたので訂正します。
上記ソースコードの「returnしたものが最終的にpriceとして設定・利用される」は間違いです。
watch関数の返り値は何にも利用されません。

ただ、コールバックの中でthis.price = xxxのようにデータを変更すれば、同じイベントループ内で起こった変更として利用されます。

サンプル

間違った情報を回答してしまい、すみません。

追記(2018/11/28)

たびたびすみません。watchのprice関数の引数が、新旧逆でした。

Comments

[TatsuyaOkawa]

ありがとうございます！
watchですか、なるほど！参考にさせていただきました！！！

[NozomuIkuta]

解決したようでよかったです。
３桁区切りは、正規表現を利用して文字列置換すればできると思います。
参考までに。