Как запретить ввод отрицательных чисел?

Question

[asferot]

Как запретить ввод отрицательных чисел? Есть поле input, в него выводится количество позиций товара, есть + и -, которые увеличивают это число или уменьшают. Но можно и ввести число и оно не должно быть отрицательным.

span(@click="product.quantity = Math.max(0, product.quantity - 1)" class="minus") &#8722
input(v-model.number="product.quantity" style="display: inline-block")
span(@click="product.quantity++" class="plus") &#43

Answer 1

[0xD34F]

@input="onInput($event, product)"

methods: {
  onInput(e, product) {
    product.quantity = Math.max(0, parseInt(e.target.value) || 0);
  },
},

или

watch: {
  products: {
    deep: true,
    handler() {
      this.products.forEach(n => n.quantity = Math.max(0, parseInt(n.quantity) || 0));
    },
  },
},

Answer 2

[Antonio Solo]

а сделать инпут тайп = намбер ? и поставить мин и макс ?

Comments

[jazzus]

Лучший вариант. js метод не очень т.к. визуально скачет с минуса на ноль, а инпутом твердый ноль

[Antonio Solo]

jazzus, если грамотно обрабатывать события онкей и реализовать виртуал-ДОМ то наверно можно избежать визуальных эффектов

[Вадим]

Можно ввести отрицательное число вручную, ограничивается только ввод стрелкам.

[Antonio Solo]

Вадим, валидацию не пройдет

Answer 3

[anlamas]

Вычисляемые свойства и слежение