Reserve zero as first character of HTML input

Question

So I have a problem with HTML input in Vue. Whenever I try to enter with zero as the first character, the input value changes. For example, if I want to enter '005', it will become '5', and similarly for '05' it will become '5'. I've tried looking up information about it, but all I've found is how to implement it, not how to prevent it. Any ideas?

I tried using e.preventDefauld(), but e is not defined. I also tried converting the number to a string on input.

Answer 1

The following should work as you expect

<template>
  number: {{ number }}
  <input :value="number" @input="updateNumber" type="number">
</template>

<script>
export default {
  data() {
    return {
      number: 12
    }
  },
  methods: {
    updateNumber(e) {
      this.number = e.target.value
    }
  }
}
</script>

This isa playground.