How to prevent negative numbers from being entered?

Question

Vue.js

How to prevent negative numbers from being entered? There is an input field, it displays the number of product positions, there are + and -, which increase or decrease this number. But you can also enter a number and it should not be negative.

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

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

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

or

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

Answer 2

and make input type = number? and put min and max?

Answer 3

Computed properties and tracking