en un bucle for tengo un elemento de entrada (número de tipo) cuyo valor quiero modificar mediante un botón de disminución y aumento:

 <div class="s-featured-list__item s-featured-list__item--expandable" v-for="(item, itemIndex) in category.items" :key="item"> <button class="button--decrease" @click="decreaseInput(catIndex, itemIndex)"> <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"> <use href="#icon-minus-16" xlink:href="#icon-minus-16"></use> </svg> </button> <input class="stepper__input" :ref="'fooditem_' + catIndex + '_' + itemIndex" :value="item.min !== '' ? item.min : 1" :min="item.min !== '' ? item.min : 1" type="number" > <button class="button--increase" @click="increaseInput(catIndex, itemIndex)"> <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"> <use href="#icon-plus-16" xlink:href="#icon-plus-16"></use> </svg> </button> </div>

Estoy configurando el atributo mínimo de forma condicional y también quiero establecer el valor inicial del elemento en el valor mínimo correcto.

Esto funciona bien y también la disminución y el aumento funcionan bien con los siguientes métodos:

 <script> export default { ... methods: { decreaseInput(catIndex, itemIndex) { const item = this.$refs[`fooditem_${catIndex}_${itemIndex}`]; if(item && item[0] && parseInt(item[0].min) < parseInt(item[0].value) ){ item[0].value = item[0].value - 1; } }, increaseInput(catIndex, itemIndex) { const item = this.$refs[`fooditem_${catIndex}_${itemIndex}`]; if(item && item[0]){ item[0].value = parseInt(item[0].value) + 1; } } } } </script>

Mi problema es que cada vez que el componente se vuelve a renderizar (por ejemplo, porque estoy modificando un valor o lo que sea), el valor de la entrada se vuelve a establecer en el valor mínimo.

¿Cómo configuro el valor solo una vez al valor mínimo y luego conservo el valor modificado por el usuario?

¡Gracias de antemano por tu ayuda!