title: How to make autoNumeric work correctly with Vue.js 2?
body: <p>I'm trying to create a Vue.js 2 directive that activate the <a href="http://decorplanit.com/plugin/" rel="nofollow">autoNumeric</a> jquery plugin on the input it is declared on.</p>
  
  <p>For instance, the following input will have the autoNumeric plugin activated via the vue directive <code>v-cdz-numeric</code>, and the linked <code>v-model</code> is <code>a</code>:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;input type="text" v-cdz-numeric v-model.number="a"&gt;
  </code></pre>
  
  <p>The tricky part when mixing input mask plugins (ie. autoNumeric) with frameworks that provides data-binding, is that they usually do not mix up very well;</p>
  
  <ul>
  <li>Usually, the <code>input</code> and <code>change</code> events are not sent anymore (cf. <a href="https://codepen.io/AnotherLinuxUser/pen/LRrpJw?editors=1111" rel="nofollow">events ok with pure autoNumeric</a>, no events with <a href="http://codepen.io/AnotherLinuxUser/pen/YWVqEg?editors=1010" rel="nofollow">angular</a> nor <a href="http://codepen.io/AnotherLinuxUser/pen/bwQLKd?editors=1010" rel="nofollow">vue.js</a>),</li>
  <li>and more importantly, the framework rely on its <em>own</em> internal variable to keep the DOM value in sync. Which means while the input mask plugin (autoNumeric) only change the DOM value, you must take extra care to make Vue.js aware of this change (and hence manually change the value of the related <code>v-model</code>).</li>
  </ul>
  
  <p>To sum up, for a given input, you have to take care of two variables; the real DOM value, and the framework value.</p>
  
  <p>Now, to keep things clean, I want to keep only the <em>unformatted</em> value in the <code>v-model</code> (Note: If I set the <strong>formatted</strong> value in the <code>v-model</code>, everything works fine).</p>
  
  <p>So, whenever the user inputs some characters inside the input, I update the Vue.js <code>v-model</code> with <strong>the unformatted value</strong> from autoNumeric <em>(and then all hell breaks loose)</em>.</p>
  
  <pre class="lang-js prettyprint-override"><code>function getUnformattedValue() {
      //This returns the raw unformatted value
      return Number(self.jQueryElement.autoNumeric('get'));
  }
  
  function updateValue(event) {
      let rawValue = getUnformattedValue();
  
      //Update the v-model value attached to the element
      self[vModelName] = rawValue; //DO NOT work when setting the raw unformatted value
      //self[vModelName] = el.value; //Works fine for the formatted value
  }
  </code></pre>
  
  <p>The problem is that doing so makes Vue.js update the DOM input value to the raw <em>unformatted</em> value immediatly, which is not the intended result.</p>
  
  <p><em>My question is</em> : Is there a way to have an input managed by autoNumeric play well with Vue.js, so that everytime the user inputs some numbers, the <code>v-model</code> is kept in sync <strong>with the raw unformatted value</strong>?</p>
  
  <p>cf. live example on <a href="http://codepen.io/AnotherLinuxUser/pen/zKVWeK?editors=1010" rel="nofollow">codepen</a>.</p>
  
  <p><strong>tl;dr</strong>: How can you use autoNumeric and Vue.js 2 so that the <code>v-model</code> always keeps the <em>unformatted</em> value without interfering with the formatted user input?</p>