Setting max and min limit on input field?

Question

i am having this issue where i have a vuetify text-field and i am trying to set a max and min limit on it. Now setting min=0 and max=10 works but seems like you could still paste values more than 10.

Here's a codepen

<div id="app">
  <v-app id="inspire">
    <v-container>
      <v-layout row wrap>
        <v-text-field
         type="number"
         min=0
         max=10
         onkeyup="if(this.value > 10) this.value = 10;">    
        </v-text-field>
      </v-layout>
    </v-container>
  </v-app>
</div>

new Vue({
  el: '#app',
  data() {
    return {
    }
  }
 })

Using the onkeyup works but you can still paste values greater than 10 and if you click outside, the value greater than 10 shows up.

Answer 1

Use oninput and I would not hardcode the values

oninput="if(Number(this.value) > Number(this.max)) this.value = this.max;"