title: How can I implement v-model.number on my own in VueJS?
body: <p>I have a text field component for numeric inputs. Basically I'm just wrapping v-text-field but in preparation for implementing it myself. It looks like this.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;v-text-field v-model.number = &quot;content&quot; /&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
      name: 'NumericTextField',
      props: [ 'value' ],
      computed: {
          content: {
              get () { return this.value },
              set (v) { this.$emit('input', f) },
          },
      }
  }
  &lt;/script&gt;
  </code></pre>
  <p>This has generated user feedback that it's annoying when the text field has the string &quot;10.2&quot; in it and then backspace over the '2', then decimal place is automatically delete. I would like to change this behavior so that &quot;10.&quot; remains in the text field. I'd also like to understand this from first principles since I'm relatively new to Vue.</p>
  <p>So I tried this as a first past, and it's the most instructive of the things I've tried.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;v-text-field v-model=&quot;content&quot; /&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
      name: 'NumericTextField',
      props: [ 'value' ],
      computed: {
          content: {
              get () { return this.value },
              set (v) {
                  console.log(v)
                  try {
                      const f = parseFloat(v)
                      console.log(f)
                      this.$emit('input', f)
                  } catch (err) {
                      console.log(err)
                  }
              },
          },
      }
  }
  &lt;/script&gt;
  </code></pre>
  <p>I read that v-model.number is based on parseFloat so I figured something like this must be happening. So it does fix the issue where the decimal place is automatically deleted. But... it doesn't even auto delete extra letters. So if I were to type &quot;10.2A&quot; the 'A' remains even though I see a console log with &quot;10.2&quot; printed out. Furthermore, there's an even worse misfeature. When I move to the start of the string and change it to &quot;B10.2&quot; it's immediately replaced with &quot;NaN&quot;.</p>
  <p>So I'd love to know a bunch of things. Why is the body of the text body immediately reactive when I change to a NaN but not immediately reactive when I type &quot;10.2A&quot;? Relatedly, how did I inadvertently get rid of the auto delete decimal place? I haven't even gotten to that part yet. So I'm misunderstanding data flow in Vue.</p>
  <p>Lastly, how can I most simply provide a text box that's going to evaluate to a number for putting into my data model but not have the annoying auto delete of decimal places? The existing functionality doesn't auto delete trailing letters so I'm guessing the auto delete of decimal places was a deliberate feature that my users don't like.</p>