When you specify type="number", the browser undergoes some internal processing, causing the value of the input (which is linked to your variable) to be a Number, not exactly matching the text in the box.
If the text in the box is not a valid number, the internal value will be empty. Typing one '.' won't change the value: 10. and 10 hold the same numerical value. However, typing a second '.' renders the value invalid, resulting in an empty internal value. Interestingly, what you entered in the input remains visible, but retrieving it is not possible.
Your choices are to discontinue using type="number", allowing your code to function as intended (at the cost of losing the up-and-down arrow functionality for value changes), or implementing a more complex workaround.
Update: The provided solution works reasonably well by enforcing a standardized version of the number for usage. One drawback is that the cursor will jump to the end of the number after each modification. While this can be addressed, the process is fairly intricate, so it's omitted here.
new Vue({
el: '#app',
data: {
quantity: ''
},
computed: {
ppQuantity: {
get() {
return this.quantity;
},
set(val) {
this.quantity = '';
this.$nextTick(() => {
this.quantity = val.replace('.', '');
});
}
}
}
})
<script src="https://unpkg.com/vue"></script>
<div id="app">
<input type="number" v-model="ppQuantity">
</div>