How do I set the user can not enter the number 0 in the first number?

Question

I try like this:

   <v-text-field
      type="number"
       @keyup="handler(text)"
        v-model="text"
    >

Demo and full code like this: https://codepen.io/positivethinking639/pen/yLeoppa

But this code has not worked perfectly. If I enter 852 . Then I move the cursor to the right of the number 8 and enter the number 0 , it can. So this code isn't perfect

How can I solve this problem?

Answer 1

Using a regex:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    text: null
  }),
  methods: {
    handler(val){
        this.text = val.replace(/^[^1-9]+/, '')
    }
  }
})

Answer 2

Demo You are looking directly whole enter. just check first letter

if(val.substr(0,1)==="0"){
    this.text=val.slice(1);
}

Answer 3

If you want the preserve the string, like if someone types 852 and then you add the 0 in front, and you want it to change back to 852 rather than null.

Like change 0852 -> 852 if the zero was added later.

Then you should update your handler function

handler(val){
      if(val==="0"){
         this.text=null;
      }
      if(val[0] === "0"){
        this.text = this.text.substr(1);
      }
    }

Answer 4

You can check if the first char is "0" like this:

 if(val[0] === "0") {
    this.text = null;
 }