Vue.js 값을 값으로 표시하지만 값은 그대로 유지하십시오.

Question

"formatted-number"라는 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 출력 만 변경하고 값은 그대로 유지합니다.