<h3 dir="auto">Version</h3>
<p dir="auto">2.6.11</p>
<h3 dir="auto">Reproduction link</h3>
<p dir="auto"><a href="https://codepen.io/davegould41/pen/qBRqyRo?editors=101" rel="nofollow"> https://codepen.io/davegould41/pen/qBRqyRo?editors=101</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<ul dir="auto">
<li>Create an input element with event modifier <code class="notranslate">v-model.number="num"</code></li>
<li>try typing .01</li>
<li>notice it resets the value to 1</li>
<li>(inputting 0.01 works though)</li>
</ul>
<h3 dir="auto">What is expected?</h3>
<p dir="auto">If the user enters <code class="notranslate">.01</code> the input element should have the value of <code class="notranslate">.01</code></p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto"><code class="notranslate">.number</code> input modifier is removing decimal on user input</p>
<p dir="auto">If a user inputs <code class="notranslate">.01</code> they the input element will capture as <code class="notranslate">1</code></p>
<hr>
<p dir="auto">I realize that javascript evaluates <code class="notranslate">.0</code> as <code class="notranslate">0</code> but this is a common scenario when adding numbers to an input element</p>
<h3 dir="auto">Version</h3>
<p dir="auto">2.5.8</p>
<h3 dir="auto">Reproduction link</h3>
<p dir="auto"><a href="https://jsfiddle.net/50wL7mdz/79189/" rel="nofollow">https://jsfiddle.net/50wL7mdz/79189/</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<p dir="auto">Included in fiddle</p>
<h3 dir="auto">What is expected?</h3>
<p dir="auto">Input type='number' should  not clear values, accept stings formatted in different locales. v-model.number should not return string.</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">Input value is cleared sometimes, v-model.number returns "" for "" and partially typed numbers.</p>
<hr>
<p dir="auto">This issue started with topic on forum <a href="https://forum.vuejs.org/t/extra-directive-for-number-inputs/22438" rel="nofollow">https://forum.vuejs.org/t/extra-directive-for-number-inputs/22438</a>, it was suggested to open an issue for that. Here is original post:</p>
<p dir="auto">Hi!</p>
<p dir="auto">I've found that <code class="notranslate">v-model.number</code> has limitations and requires some boilerplate in some cases. This is mostly because <code class="notranslate">input[type="number"]</code> returns <code class="notranslate">''</code> for partially input numbers (like <code class="notranslate">1.</code>). Here are some problems with it:</p>
<ul dir="auto">
<li>App has no difference when input is either empty or invalid/partial.</li>
<li>Bound attribute has to be of <code class="notranslate">[String, Number]</code> type.</li>
<li><code class="notranslate">''</code>, <code class="notranslate">undefined</code>, and <code class="notranslate">0</code> are falsy values. This leads to <code class="notranslate">val !== ''</code> checks in all places this attribute is used.</li>
</ul>
<p dir="auto">2nd and 3d issues can be solved with computed property, but it's hard to implement for nested ones and array of values.</p>
<p dir="auto">I came to using separate field for casted values:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;input
  type='number' 
  v-model='obj.val' 
  @input='$set(obj, &quot;valCasted&quot;, _nOrNull($event.target.value))'
/&gt;"><pre class="notranslate"><code class="notranslate">&lt;input
  type='number' 
  v-model='obj.val' 
  @input='$set(obj, "valCasted", _nOrNull($event.target.value))'
/&gt;
</code></pre></div>
<p dir="auto">I wanted to it implement with custom directive (like <code class="notranslate">v-model-number='obj.valCasted'</code>), but I see that <code class="notranslate">v-model</code> is handled differently by compiler. This way it can automatically use <code class="notranslate">$set</code> when property is not defined on object. But I have not found how this  can be implemented with custom directives.</p>
<p dir="auto">So here are questions :)  :</p>
<ul dir="auto">
<li>Is there a better way to work with <code class="notranslate">input[type="number"]</code>?<br>
If not:</li>
<li>Can this be implemented with custom directives as convenient as <code class="notranslate">v-model</code> is?</li>
<li>Should this be added to vue?</li>
</ul>
<hr>
<p dir="auto">After that post I've tried to implement custom component, it's included in fiddle, but it also has some issues.<br>
I've also added different types of inputs to fiddle to check their behaviour and checked against different locales.</p>
<p dir="auto">Thank you!</p>