title: VueJs Custom currency mask
body: <p>My Currency mask has got some issues.</p>
  
  <p>When I am typing say <code>10000</code> in the field, it formats it as expected <code>10,000</code> but the moment i shift focus to another field or press tab. The mask shifts the comma position to the left by 1. i.e. <code>10,000</code> becomes <code>1,0000</code></p>
  
  <p>You can check codepan for the issue, can anyone help me with this?</p>
  
  <p><a href="https://codepen.io/veer3383/pen/BxqzLb?editors=1010#" rel="nofollow noreferrer">https://codepen.io/veer3383/pen/BxqzLb?editors=1010#</a></p>
  
  <p>The template:</p>
  
  <p><code>&lt;v-text-field @keyup="formatCurrency(initialBalance, $event)" :prefix="currency" v-model="initialBalance" label="Balance" :disabled="disabled"&gt;&lt;/v-text-field&gt;</code></p>
  
  <p>The method:</p>
  
  <pre><code>formatCurrency (num: any, e: any) {
      num = num + '';
      var number = num.replace(/[^\d.-]/g, '');
      var splitArray = number.split('.');
      var integer = splitArray[0];
      var mantissa = splitArray.length &gt; 1 ? '.' + splitArray[1] : '';
      var rgx = /(\d+)(\d{3})/;
      while (rgx.test(integer)){
          integer = integer.replace(rgx, '$1' + ',' + '$2');
      }
      e.currentTarget.value = integer + mantissa.substring(0, 3);
  },
  </code></pre>