Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
3
Help us understand the problem. What is going on with this article?
@horikeso

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

More than 1 year has passed since last update.

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"

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

3
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
horikeso
個人的な備忘録ばかりですが、よろしくお願いします。難しいことはよくわかりません!

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
3
Help us understand the problem. What is going on with this article?