Как сделать валидацию инпута c типом number Vue.js?

Question

Не пойму как написать проверку на введенное значение, чтобы нельзя было ввести число <1 и >99 Все что писала до этого не работает

<input
              class="qty__input form__input"
              type="number" 
              @input="validateInputData(product.qty)"
              v-model="product.qty">
 
<script>
 methods: {
    validateInputData(qty) {
      // this.$emit("validateInputData")
      if (qty < 1 || qty === "" || qty === 0) {
        qty = 1;
      } 
      else if (qty >= 99) {
        qty = 99;
      } 
      else {
        qty = qty;
      }
    }
</script>

подскажите как это сделать на vue.js

Answer 1

Вот так. Но вообще, правильнее подсвечивать ошибку а не молча менять на валидное значение

var app = new Vue({
  el: '#app',
  data: {
    product: {
      qty: 1
    },
  },
  methods: {
    validateInputData() {
      if (this.product.qty < 1) return this.product.qty = 1;
      if (this.product.qty > 99) this.product.qty = 99;
    },
  },
})

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<div id="app">
  <input
    v-model="product.qty"
    type="number"
    @input="validateInputData()"
  />
</div>

БЛОГ НА HUSL

Как сделать валидацию инпута c типом number Vue.js?

Ответы (1 шт):