循环值3组合api中产品的计数器增量错误

Question

我有一个计数器的问题，当增加或减少循环中的产品都将增加，但第一个索引中的产品是递增的，我已经复制了这个错误。

import { ref } from 'vue'
export default{
setup() {
const count = ref(1);
const increment = async() => {
count.value ++;
}
const decrement = async()=> {
count.value --;
}
const products = ref(
[
{id:1,name:"Product1"}, 
{id:2,name:"Product2"},
{id:3,name:"Product3"},
{id:4,name:"Product4"}
]
);
return{
products,
count,
increment,
decrement
}
}
}
</script>
<template>
<div v-for="item in products" :key="item.id">
<p> {{ item. name }}</p> 
<button @click="increment"> + </button>
{{ count }}
<button @click="decrement"> - </button>
</div>
</template>

https://sfc.vuejs.org/eNp9k89ygyAQxl9lh0uTSdTJn5M1mfYNei89GMWWRIEBtM04vntXYgw1bT0osB8/2W wwnmi1qrsnbopi81lgtlxwhron5bgekvzawxv8c3z2a5j74oikjxvude8sqvaaw4ayxjtlvoakkqxeucazib8bjualxiz2hsmhzsoztbqvcmrbgqtb7af2xrljosq61tvlau1by7nrzrjkgcraqrbebrx2mbycb2t28vkfdkkda8jowrjgzjpjozjgsyawbgipv4dfigc3lyoahcw/ZljwrFTY1IzFJTKa5snsqeKWkttCCZgV0UGhZwQOKHqgAYF8umLMirUvb9ksAhtlazeYwTPHJpDAW37WwsOtBs9X8cRLlItOsYk6RmrPIkLDbexCnRELYpGXNYLG4EboJK2d3rP9QQfA3SmmZ15k1w7nH6KsHa3ker5YirVhMyctlw4qSbgkT0XoiWveiiWYz0Wx + 0HMOL5eTUqwsfo5JR/WKhNHkSmyviWPJpT6PcJRqPGMvGIhM1Vw0PLTMI1gSgbzO9J9AwbPI30 =

我希望计数器只增加一个产品

Answer 1

你在找答案吗?您可以添加一个新的计数变量在你的数组中。Count是通过数组循环的示例

<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>