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

Question

[RudMa]

Не пойму, как написать проверку на введенное значение, чтобы нельзя было ввести число <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

[0xD34F]

Что такое product?

Если это одиночный объект, то проще всего будет установить наблюдение за интересующим вас свойством:

watch: {
  'product.qty'(val) {
    this.product.qty = Math.max(1, Math.min(99, val | 0));
  },
},

Если у вас там v-for и это элемент массива, то можно установить глубокое наблюдение за всем массивом:

watch: {
  products: {
    deep: true,
    handler: val => val.forEach(n => n.qty = Math.max(1, Math.min(99, n.qty | 0))),
  },
},

Если не нравится watch - исправляйте непосредственно пользовательский ввод:

methods: {
  onInput(e) {
    if (e.isTrusted) {
      e.target.value = Math.max(1, Math.min(99, e.target.value | 0));
      e.target.dispatchEvent(new Event('input'));
    }
  },
},

<input
  @input="onInput"
  ...

Можно даже это дело оформить в виде директивы:

function onInput({ isTrusted, target: t }) {
  if (isTrusted) {
    t.value = Math.max(t.min, Math.min(t.max, t.value | 0));
    t.dispatchEvent(new Event('input'));
  }
}

const minmaxDirective = {
  mounted: el => el.addEventListener('input', onInput),
  unbind: el => el.removeEventListener('input', onInput),
};

app.directive('minmax', minmaxDirective);

<input
  v-minmax
  min="1"
  max="99"
  ...

Comments

[Aetae]

Ты наркоман штоле? С React попутал?

[0xD34F]

Aetae, так точно.

Answer 2

[artloveyou]

<template>

<input type="number" min=1 max=5 :class="{invalid:userChoice < 1 || userChoice > 5}" v-model="userChoice" />

</template>

<script>
export default {
  data() {
    return {
      userChoice: 1
    }
  }
}
</script>

https://codesandbox.io/s/tender-dream-xxjb7?file=/...

Правда работает, пока стрелками выбор производится, а если вручную заполнять инпут, надо доп проверку пилить