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

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  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?

CodePudding user response：

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 item = $ref({
  QuantityNeeded: 10,
  QuantityPicked: 1,
})