Vue.js將價值顯示爲價格，但保留爲int

Question

我有一個名爲「formatted-number」的vue組件，它接收一個int值（1234）並將其當前更改爲一個字符串（「12.34」），以便它顯示爲一個文本框中的價格（帶「，」或「。」，取決於國家）。

我想保留該值作爲一個整數，只是將其顯示爲一個價格，以便我們的用戶可以編輯「字符串價格」，但它也更新了背景中的int值。

有人有線索我怎麼能管理這個？

下面是當前的代碼：

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

創建一個過濾器：docs。

過濾器只會改變html輸出並保持原樣。