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.

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.

• javascript
• vuejs2
• vuetify.js

• use oninput instead – epascarello Commented Jul 16, 2019 at 18:32
• 1 @epascarello thanks. problem solved. if you want to add this as an answer, i'll accept it – user11606914 Commented Jul 16, 2019 at 18:32

6 Answers 6

Use oninput and I would not hardcode the values

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

You can put attributes on input element manually (although this solution is not clear, in fact i would call it hack, but it's easy to do)

Put $ref on you field

<v-text-field ref="myfield" ... >

and then you can modify it as mounted

mounted () {
  const inputElement = this.$refs.myfield.$el.querySelector('input')
  inputElement.min = 0
  inputElement.max = 10
}

You can also modify any other attribute like step, or maxLength (for text type). Refer input element API https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement

You can use data rules for this as well.

Eg: Inside data

data(){
organization: "",
      organizationRules: [
        (v) => !!v || "Organization is required",
        (v) =>
          (v && v.length <= 50) ||
          "Organization must be less than 50 characters",
      ],
}

Inside template

<template>
<v-text-field
          v-model="organization"
          :counter="50"
          :rules="organizationRules"
          label="Organization"
          required
        ></v-text-field>
</template>

If you want to have maximum 2 digits before and after the decimals then here's the implementation for that

template

<v-text-field v-model="input" v-on:keyup="handleInput" type="number" oninput="if(Number(this.value) > Number(this.max)) this.value = this.max;" max="99" ></v-text-field>

script

 handleInput(e) {
      let stringValue = e.target.value.toString();

      let regex = /^\d{0,2}(?:\.\d{1,2})?$/;
      if (!stringValue.match(regex) && this.budget !== "") {
        this.budget = this.previousPrice;
      }
      this.previousPrice = this.budget;
    },

you can customize the regex according to your need

Use onblur instead so anytime the input becomes unfocused the code runs to set it to the max

It is possible to use a watcher for this issue. I don't know if It is the best way but It works.

Codepen

<div id="app">
  <v-app id="inspire">
    <v-container>
      <v-layout row wrap>
        <v-text-field
         v-model="number"
         type="number"
        min=0
         max=10>    
        </v-text-field>
      </v-layout>
    </v-container>
  </v-app>
</div>

new Vue({
  el: '#app',
  data() {
    return {
      number: 0
    }
  },
  watch: {
    number (val, old) {
      console.log(val, old)
      if (+val > 10) {
        this.number = 10
      }
    }
   }
})