Vue 2 Input not updating with leading zeors - vue.js

Question

I'm trying to get rid of these leading zeros. I have a method that gets called on input, the emits it's own input:
handleInput: function (value) {
const newValue = String(parseInt(value));
this.$emit('input', newValue);
}
When I inspect the code, I do see that the value reflects this change through the props:
But looking at the actual input itself, the leading zeros still remain. I'm starting to suspect that its' because:
00000000000000123 === 123
I only think this because the only time it actually updates the input is when I change the numbers after the zero:
And the actual input element won't update. But I quite frankly don't even know what to Google for this one. Does anyone have any ideas?
<template>
<input :value="local_value" type="text" v-on:input="handleInput" v-bind="$attrs" />
</template>
<script>
export default {
props: {
value: {
type: [String, Number],
default: "",
}
},
data: function () {
return {
local_value: 0,
}
},
methods: {
handleInput: function (value) {
const newValue = String(parseInt(value.target.value));
this.$set(this, 'local_value', newValue);
this.$emit('input', newValue);
}
}
}
</script>

Answer 1

If you want to still emit that as a number then you can solve that by doing the below
<input type="tel" pattern="[0-9]*">
and then in the methods
methods: {
handleInput: function (val) {
// Removed the parseInt line
this.$set(this, 'local_value', val.target.value);
this.$emit('input', val.target.value);
}
}