v-modelにフィルタをかける

v-model以外はフィルターを使えば困らなかったけどv-modelの場合に困った。

v1ではTwo-way-フィルタがあったがv2では無い。

Two-Way フィルタ 置き換え

https://jsfiddle.net/chrisvfritz/1oqjojjx/?utm_source=website&utm_medium=embed&utm_campaign=1oqjojjx

入力欄に価格を入れてカンマ表示を行う例

computedのsetとgetでもできましたが整形後のdataに変更がない場合はキャッシュが使用され調整しないとうまくいかなかったです。

Vue.component('currency-input', {
    template: '\
        <input\
            type="text"\
            name="name"\
            v-bind:name="name"\
            ref="input"\
            v-bind:value="value"\
            v-on:input="updateValue($event.target.value)"\
            v-on:focus="selectAll"\
            v-on:blur="formatValue"\
        >\
    ',
    props: {
        name: {
            type: String,
            default: ''
        },
        value: {
            type: String,
            default: ''
        }
    },
    mounted: function () {
        this.formatValue()
    },
    methods: {
        updateValue: function (value) {
            let formatValue = parseInt(value.replace( /[^0-9\-]/g, ''), 10);
            if (isNaN(formatValue)) {
              formatValue = 0;
            }
            formatValue = 
formatValue.toString().replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,');
            this.$refs.input.value = formatValue;
            this.$emit('input', formatValue);
        },
        formatValue: function () {
            let formatValue = parseInt(this.value.replace( /[^0-9\-]/g, ''), 10);
            if (isNaN(formatValue)) {
              formatValue = 0;
            }
            this.$refs.input.value = formatValue.toString().replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,');
        },
        selectAll: function (event) {
            // Workaround for Safari bug
            setTimeout(function () {
                event.target.select();
            }, 0)
        }
    }
});

new Vue({
    el: '#price',
    data: {
      price1 : '0',
      price2 : '0',
    }
});


<div id="price">
<currency-input name="test[0]" v-model="price1"></currency-input>
<currency-input name="test[1]" v-model="price2"></currency-input>
</div>

追記

:value="A | フィルタ"
@input="Aをフィルタ前の値に戻すmethod"

の方が簡単にできそうな気がした。