During a for loop, I have an input element (type number) that needs its value modified by decrease and increase buttons:
<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>
The min attribute is set conditionally, and the initial value of the element should be set to the minimum value.
The decrease and increase functionalities work correctly with the following methods:
<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>
The issue arises when the component re-renders, resetting the input value back to the minimum value. How can I set the value only once to the minimum value and retain any modifications made by the user?
Thank you for your assistance!