Tengo un formulario con entradas basado en un modelo en vue.js. El modelo contiene una matriz de objetos en 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>La entrada se representa como un control numérico con flechas para incrementar y disminuir. No permitirá que el usuario gire por debajo de 0, ni por encima del valor definido en el item.QuantityNeeded, que es el requerido. Sin embargo, el usuario puede ingresar un valor numérico que es > item.QuantityNeeded, simplemente escribiendo en el cuadro de texto. ¿Hay alguna forma de limitar o prevenir esto?
Una solución es aplicar un controlador de eventos de input que restablece la variable v-model de <input> input> a <input>.max si el valor excede el máximo:
<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>Un colega me mostró esto que también funciona:
<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); } },