CODEWITHSUNDEEP
javascriptvue.js
kabugh
kabugh

Reputation: 315

Block typing certain numbers in vue.js

I use vue.js and have an input with this logic: onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" It allows to type only digits from 0 to 9. In my vue data() I have limitMin: 20 and would like to include that in my input validation. So if limitMin: 20, then I would like to be able to only type in numbers above 20.

<input
 type="number"
 :min="this.limitMin"
 onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57">

Upvotes: 0

Views: 456

Answers (1)

ssc-hrep3
ssc-hrep3

Reputation: 16079

You could do it like this.

new Vue({
  el: "#app",
  data: {
    inputValue: 1,
    limitMin: 20
  },
  methods: {
    validate: function() {
      if (this.inputValue >= this.limitMin) {
        this.inputValue = this.limitMin;
      }
    }
  }
});
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

<div id="app">
  <input
    type="number"
    v-model="inputValue"
    @input="validate">
</div>

Upvotes: 1

Related Questions