CODEWITHSUNDEEP
javascriptvue.jsvuejs3
Khant
Khant

Reputation: 1122

How to limit a max number for a NUMBER input in vue?

I am now trying to create a new input which will reject if the number user type in exceed the limit but it is not working the

let say the max number is 99 Currently my best way is to create something like this

<input
    type="text"
    :maxlength="2"
    aria-controls="none"
    class="number-field-input"
    inputmode="numeric"
    pattern="/d+"
    v-model="inputOne"
  />

This will limit the max number to 99 since the max length is 2 but I don't want something like this I want something like this but its not working

<input
        type="number"
        min="1"
        max="99" //may not be 99 but something between 1 and 99
        aria-controls="none"
        class="number-field-input"
        inputmode="numeric"
        pattern="/d+"
        v-model="inputOne"
   />

Upvotes: 3

Views: 12028

Answers (3)

ahmet ilboga
ahmet ilboga

Reputation: 33

I use it like this:

import { ref } from 'vue'

const min = ref(50)
const max = ref(50)
const maxError = ref(false)

const validateMin = () => {
  maxError.value = false
  if (min.value < 50) {
    min.value = 50
  } else if (min.value > 20000) {
    min.value = 20000
  } else if (min.value > max.value) {
    maxError.value = true
  }
}
const validateMax = () => {
  maxError.value = false
  if (max.value < 50) {
    max.value = 50
  } else if (max.value > 20000) {
    max.value = 20000
  } else if (max.value < min.value) {
    maxError.value = true
  }
}

Html Code:

                  <label for="min">En Az</label>
                  <input
                    type="number"
                    name="min"
                    id="min"
                    v-model="min"
                    @blur="validateMin()"
                    placeholder="En az"
                  />
         
                  <label for="max">En Çok</label>
                  <input
                    type="number"
                    name="max"
                    id="max"
                    v-model="max"
                    @blur="validateMax()"
                    placeholder="En fazla"
                  />
              

                <small v-if="maxError" class="col-span-2 text-red-600"
                  >Max değeri Min değerinden küçük olamaz!</small>

Upvotes: 1

Roh&#236;t J&#237;ndal
Roh&#236;t J&#237;ndal

Reputation: 27212

You can simply achieve that by single line of code with the help of @input event.

Live Demo :

new Vue({
  el: '#app',
  data: {
    value: 0
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input type="number" v-model="value" @input="() => { if(value > 150 || value < 0) { value = 150 }}">
</div>

Upvotes: 1

Nikola Pavicevic
Nikola Pavicevic

Reputation: 23490

You can use watcher :

const { ref, watch } = Vue
const app = Vue.createApp({
  setup() {
    let inputOne = ref(0)
    watch(inputOne,
      (newValue) => {
        inputOne.value = newValue > 99 ? 99 : newValue
      },
    );
    return { inputOne };
  },
})
app.mount('#demo')
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
<div>
  <input
    type="number"
    min="1"
    max="99" 
    aria-controls="none"
    class="number-field-input"
    inputmode="numeric"
    pattern="/d+"
    v-model="inputOne"
   />
</div>

Upvotes: 5

Related Questions