The :max doesn't work properly in html input control when typing in a value

user_1400560 0
Viewed 43

I have a form with inputs based on a model in vue.js. The model contains an array of objects in searchResultOrderLines.

<tr v-for="(item, index) in searchResultOrderLines" v-bind:value="item" v-on:click="editSearchRow(index)">
    <td>
        <input class="form-control" type="number" v-model="item.QuantityPicked" min="0" :max="item.QuantityNeeded" />
    </td>

The input renders as a numeric control with arrows to increment and decrement. It will not allow the user to spin below 0, nor above the value defined in the item.QuantityNeeded, which is as required. However, the user is able to enter a numeric value which is > item.QuantityNeeded, by simply typing into the text box. Is there any way of limiting or preventing this?

vue.js html javascript
2 Answers

One solution is to apply an input-event handler that resets the <input>'s v-model variable to <input>.max if the value exceeds the max:

<script setup>
let searchResultOrderLines = $ref([
  {
    QuantityNeeded: 10,
    QuantityPicked: 1,
  },
  {
    QuantityNeeded: 100,
    QuantityPicked: 50,
  },
])
         
const limitValue = (e, item) => {
  if (Number(e.target.value) > Number(e.target.max)) {
    item.QuantityPicked = Number(e.target.max)
  }
}
</script>

<template>
  <fieldset v-for="item in searchResultOrderLines">
    <input
      class="form-control"
      type="number"
      v-model="item.QuantityPicked"
      min="0"
      :max="item.QuantityNeeded"
      @input="limitValue($event, item)" 
    />
  </fieldset>
</template>

demo

user_62771510

A colleague showed me this which also works:

<input v-on:blur="checkQuantity(item, index)" class="form-control" type="number" v-model="item.QuantityPicked" min="0" :max="item.QuantityNeeded" />

checkQuantity: function (item, index) {
    var self = this;
    if (item.QuantityPicked > item.QuantityNeeded) {
        var copyOfItem = Object.assign({}, item);
        copyOfItem.QuantityPicked = item.QuantityNeeded;
        self.$set(self.searchResultOrderLines, index, copyOfItem);
    }
},
user_14005600
Related