title: numeric input component for vue js
body: <p>Here is my implementation using <em>Numeral.js</em>:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>        Vue.filter('formatNumber', function (value) {
              return numeral(value).format('0,0.[000]')
          })
  
          Vue.component('input-number', {
              template: '\
      &lt;div&gt;\
        &lt;label v-if="label"&gt;{{ label }}&lt;/label&gt;\
        &lt;input\
          ref="input"\
          v-bind:value="displayValue(value)"\
          v-on:input="updateValue($event.target.value)"\
          v-on:focus="selectAll"\
        &gt;\
      &lt;/div&gt;\
    ',
              props: {
                  value: {
                  },
                  label: {
                  }
              },
              methods: {
                  updateValue: function (inputValue) {
  
                      var valToSend = inputValue
  
                      var numVal = numeral(valToSend).value()
                      
                      if (isNaN(numVal)) {
                          valToSend = this.value.toString()
                          numVal = numeral(valToSend).value()
                      }
  
                      var formattedVal = numeral(numVal).format('0,0.[000]')
  
                      this.$refs.input.value = formattedVal + (valToSend.endsWith('.') ? '.' : '')
  
                      this.$emit('input', numeral(formattedVal).value())
                      
  
                  },
                  displayValue: function (inputValue) {
                      return numeral(inputValue).format('0,0.[000]')
                  },
                  selectAll: function (event) {
                      // Workaround for Safari bug
                      // http://stackoverflow.com/questions/1269722/selecting-text-on-focus-using-jquery-not-working-in-safari-and-chrome
                      setTimeout(function () {
                          event.target.select()
                      }, 0)
                  }
              }
          })
          var app = new Vue({
              el: '#app',
              data: {
                  pricePerGram: '160000',
                  weightInGrams: '1.5',
              },
              computed: {
                  totalPrice: function () {
                      return (this.pricePerGram * this.weightInGrams)
                  },
                  toatlWithVat: function () {
                      return (this.totalPrice *1.09)
                  }
              }
          })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"&gt;&lt;/script&gt;
  
      &lt;div id="app"&gt;
          &lt;input-number v-model="pricePerGram" label="Price per gram:"&gt;&lt;/input-number&gt;&lt;br /&gt;
          &lt;input-number v-model="weightInGrams" label="Weight in grams:"&gt;&lt;/input-number&gt;&lt;br /&gt;
          &lt;div&gt;&lt;label&gt;Total price: &lt;/label&gt;&lt;span dir="ltr"&gt;{{totalPrice | formatNumber}}&lt;/span&gt;&lt;/div&gt;&lt;br /&gt;
          &lt;div&gt;&lt;label&gt;Total + Vat: &lt;/label&gt;&lt;span dir="ltr"&gt;{{toatlWithVat | formatNumber}}&lt;/span&gt;&lt;/div&gt;&lt;br /&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Am I doing it right? Is there a better way to implement a numeric only input?</p>
  <p>I'm looking to improve this. Using Numeral.js is not mandatory. This is just a library I found.</p>
  <p>a few things regarding current implementation:</p>
  <ul>
  <li><p>Supports thousand separator (as you type).</p>
  </li>
  <li><p>Supports decimal point with 3 digits (<strong>I like to improve this and accept unlimited number of decimal digits.</strong> it is because of this format <code>0,0.[000]</code>. I couldn't find any format accepting unlimited decimal digits with Numeral.js)</p>
  </li>
  <li><p>only accepts numbers, comma &amp; point (no character allowed).</p>
  <p>I can also use regular expression instead of Numeral.js. Can this be an improvement?</p>
  </li>
  </ul>