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?
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>
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);
}
},