2020年9月9日水曜日

VueJS(というかVuetify)で数値入力

 入力した値を自動的に3桁区切りにフォーマットして表示、
そして保存はコンマをとって数値として保存したかった。

そんな都合よく簡単な方法が見つからず、双方向フィルタもすごく面倒だし(v2なので)いろいろ試した末にこうなった。

<v-text-field :value="cost | number_Format" @input="value=>{cost = pureNum(value)}"  suffix="円"></v-text-field>

number_Formatは探したらあったフィルタ
Vue.filter('number_Format',function(value){
if(value == "" || !value.match(/^\d+$/)){
return value;
}
let formatter = new Intl.NumberFormat('ja-JP');
return formatter.format(value);
});

pureNumはメソッドとして入れたコンマはぎとり君
    pureNum(val){
return val.replace(/,/g, '')
},

0 件のコメント:

コメントを投稿