Vue.js値として値を表示しますが、そのままの値にします

Question

私は "フォーマット番号"と呼ばれるvueコンポーネントを持っていて、int値（1234）を受け取って現在の文字列（ "12.34"）に変更します。それはテキストフィールドに価格として表示されます（ "、"または "。"は国によって異なります）。

私は値をintとして保持し、単に値段で表示したいので、ユーザーは "文字列価格"を編集できますが、バックグラウンドでint値を更新することもできます。

誰かが私がこれをどのように管理できるかを手がかりにしていますか？ここで

は、現在のコードです：docs：

Vue.component('formattedNumber', { 
    props: ['value', 'abs'], 
    template: '<input type="text" :value="value" autocomplete="off" @blur="updateNumber($event.target.value)" ref="input">', 
    mounted: function() { 
     this.updateNumber(this.value/100); 
    }, 
    methods: { 
     separators: function() { 
      var comparer = new Intl.NumberFormat(navigator.language).format(10000/3); 

      return { 
       thousandSeparator: comparer[1], 
       decimalSeparator: comparer[5] 
      }; 
     }, 
     unformat: function (number) { 
      var separators = this.separators(); 

      var result = number 
       .toLocaleString(navigator.language) 
       .replace(separators.thousandSeparator, '') 
       .replace(/[^\d.,-]/g, '') 
       .replace(separators.decimalSeparator, '.'); 

      return this.abs ? Math.abs(Number(result)) : this.Number(result); 
     }, 
     updateNumber: function (value) { 
      this.$emit('input', new Intl.NumberFormat(
       navigator.language, 
       {minimumFractionDigits: 2, maximumFractionDigits: 2}).format(this.unformat(value) 
      )); 
     } 
    } 
}); 

Answer 1

は、フィルタを作成します。

フィルタはhtml出力のみを変更し、値はそのままのままにします。