How to update counter inside a v-loop in vue.js? - vue.js

Question

How can I i update the counters separatly inside v-for? Now it updates both when incrementing, since the list can be dynamic i cant set variables for all the types.
The code i run inside the v-for is:
<a #click.prevent="decrease(quote, min)">
Decrease
</a>
<input name="types" type="text" v-model="quote" >
<a #click.prevent="increase(quote, max)">
Increase
</a>
It looks like:
And here is the vue script:
<script>
var app = new Vue({
el: "#contents",
data: {
quote: 1,
},
computed: {
},
methods: {
decrease: function(quote, min){
app.quote--;
if(app.quote < min){
app.quote = min;
}
},
increase: function(quote, max){
if(app.quote > max){
app.quote = max;
}
},
},
});
</script>

Answer 1

You should do something like this:
<template>
<div>
<div v-for="item in d" :key="item">
<Counter></Counter>
</div>
</div>
</template>
<script>
import Counter from "./Counter.vue";
export default {
name: "HelloWorld",
components: { Counter },
props: {
msg: String
},
data: () => {
return {
d: [1, 2]
};
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
/// counter component with its own state
<template>
<div>
<div>
<span>{{count}}</span>
<button v-on:click="increment">increment</button>
<button v-on:click="decrement">decrement</button>
</div>
</div>
</template>
<script>
export default {
name: "Counter",
data: () => {
return {
count: 0
};
},
methods: {
increment() {
this.count++;
},
decrement() {
this.count--;
}
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
demo: https://codesandbox.io/s/silly-solomon-0hk16?file=/src/components/Counter.vue:0-516
The idea is that you should put the logic inside each component, but in your case you set just one state ant try to share it for many instance, instead you should create a reusable component with its own state, like in my case : count