Vue

by jariway

HTML

<div id="app">
  <h2>
    Use the inputs to see how the values are saved separately
  </h2>
  <div class="item" v-for="(row, index) in items" :key="index">
    <input type="text" v-model="itemValues[index]">
    <button @click="decrease(index)">
      Decrease
    </button>
    <button @click="increase(index)">
      Increase
    </button>
  </div>
  <h3>
    {{itemValues[0]}}
  </h3>
  <h3>
    {{itemValues[1]}}
  </h3>
  <h3>
    {{itemValues[2]}}
  </h3>

</div>

Vue

new Vue({
  el: "#app",
  data: function () {
  	return {
    items: [
    {name: "name1",index:"1"},
    {name: "name2",index:"2"},
    {name: "name3",index:"3"},
    ],
    itemValues: [],
    }
  },
  methods: {
  	increase(index) {
			this.setFirstValueToZero(index);
    	this.itemValues[index] ++;
      this.$forceUpdate();
    },
    decrease(index){
    this.setFirstValueToZero(index);
    	this.itemValues[index] --;
 			this.$forceUpdate();   
      },
    setFirstValueToZero(index){
      if(this.itemValues[index] == undefined) {
      	this.itemValues[index] = 0;
      }
    }
  },

})