I am facing an issue where the counters of all options in the cart increase simultaneously when I add an option. I initially attempted to solve this using Vuex, but my lack of experience led me to take a simpler approach. How can I prevent all option counters from increasing when adding just one?
(I have included an example of the code to make it easier to understand.)
<template>
<div>
<div v-for="optionTests in ArrayOption" :key="optionTests.id">
<p>{{ optionTests.id}}</p>
<p>{{ optionTests.name}}</p>
<p>{{ optionTests.description}}</p>
<button @click="testCount -= 1" :disabled="testCount < 1">-</button>
<p>{{ testCount }}</p>
<button @click="testCount += 1" :disabled="testCount > 0">+</button>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
data(){
return{
ArrayOption:[
{
id:1,
name: 'option1'
description: 'This is option 1, add me to the cart!'
},
{
id:2,
name: 'option2'
description: 'This is option 2, add me to the cart!'
},
{
id:3,
name: 'option3'
description: 'This is option 3, add me to the cart!'
},
{
id:4,
name: 'option4'
description: 'This is option 4, add me to the cart!'
}
],
testCount:0,
}
}
}