title: How to prevent Vue input from setting value?
body: <p>I have the following Vue code:</p>
  
  <pre><code>// HTML
  &lt;div id="app"&gt;
    Value: &lt;pre&gt;{{ value }}&lt;/pre&gt;
    &lt;input type="text" :value="value" @input="setValue"&gt;
  &lt;/div&gt;
  
  // JS
  new Vue({
    el: "#app",
    data: {
      value: '',
    },
    methods: {
      setValue(event){
        /* Remove non-numeric values */
          this.value = event.target.value.replace(/[^\d]/g, '');
      }
    }
  });
  </code></pre>
  
  <p>I have it set up on JSFiddle here: <a href="http://jsfiddle.net/eywraw8t/353729/" rel="nofollow noreferrer">http://jsfiddle.net/eywraw8t/353729/</a>.</p>
  
  <p>Why does the input allow me to enter non-numeric values?</p>
  
  <p>If you run the code above, and enter non-numeric gibberish into the input element (e.g. <code>asdasfa</code>), you'll see that the input element will contain your entered text (<code>asdasfa</code>), but the element above the input will be empty!</p>
  
  <p>I would like to restrict users to only being allowed to enter numbers into the input. I would like to do this using only Vue, no 3rd party libraries or <code>type="number"</code>.</p>