How can I set input value only once to dynamic value and then keep the modified value?-CodePudding

in a for loop I've an input element (type number) whose value I want to modify by a decrease and increase button:

<div  v-for="(item, itemIndex) in category.items" :key="item">
    <button  @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  :ref="'fooditem_'   catIndex   '_'   itemIndex" :value="item.min !== '' ? item.min : 1" :min="item.min !== '' ? item.min : 1" type="number" >
    <button  @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>

I am setting the min attribute conditionally and also want to set the initial value of the element to the correct minimum value.

This works fine and also decreasing and increasing works fine 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>

My problem is, that whenever the component renders again (e.g. because I'm modifying a value or whatever), the value of the input is set back to the minimum value.

How do I set the value only once to the minimum value and then keep the modified value by the user?

Thanks in advance for your help!

CodePudding user response：

You can declare a variable and set it value to minimum value and then whenever component render again it will set it value to its minimum value. Hope you get what you want .

CodePudding user response：

Easiest solution should be using v-once template directive.