[Vuejs]-Error with Counter increment for products in loop vue 3 composition api

by

0👍

here the answer you looking for? You can do this add a new count variable in your array. Count is loop by array Try this >>> Example

<script>
import { ref } from 'vue'
  export default{
    setup() {
       //const count = ref(1);
       const increment = async(index) => {
         products.value[index].count++;
       }
       const decrement = async(index)=> {
          products.value[index].count--;
       }
       const products = ref(
       [
         {id:1,name:"Product1", count:0}, 
         {id:2,name:"Product2", count:0},
         {id:3,name:"Product3", count:0},
         {id:4,name:"Product4", count:0}
       ]
       );
       return{
         products,
         //count,
         increment,
         decrement
       }
    }
  }

</script>

<template>
    <div v-for="(item,index) in products" :key="item.id">
        <p> {{ item. name }}</p> 
        <button @click="increment(index)"> + </button>
              {{ item.count }}
        <button @click="decrement(index)"> - </button>
  </div>
</template>

Leave a comment