Having an issue with data retrieval from an API that lacks a 'count' property, I am required to create a new array and utilize it in the v-for loop.
I aim to assign a specific number to the counter so that upon clicking the add button on each row, the object is added to a Vuex state corresponding to the counter number.
However, when incrementing using the button, all count columns across rows increase simultaneously.
This button resides in a separate component where the count value will be dynamically transmitted.
Despite my attempts to include td elements in all rows, the incrementation affects every individual column.
Appreciate any assistance in this matter.
Below is the code snippet containing the v-data-table:
<v-data-table dense :headers="dataTableHeaders" :items="filteredCoins" :items-per-page="5">
<template v-slot:body="{ items }">
<tbody>
<tr v-for="coin in items" :key="coin.symbol">
<td>{{ coin.symbol }}</td>
<td>{{ coin.lastPrice }}</td>
<td>
<v-btn icon x-small text @click.stop="counter++">
<v-icon>mdi-arrow-up</v-icon>
</v-btn>
<v-counter :value="counter" />
<v-btn icon x-small text @click.stop="counter--">
<v-icon>mdi-arrow-down</v-icon>
</v-btn>
</td>
<td v-if="$store.state.portfolio.includes(coin)">
<UpdateDeleteButtons :selected-coin="coin" :count="counter"/>
</td>
<td v-else>
<AddButton :selected-coin="coin" :count="counter"/>
</td>
</tr>
</tbody>
</template>
</v-data-table>
Here's the AddButton component for reference:
<template>
<v-btn x-small color="#0EDC79" @click="saveCoinToPortfolio()">
Portfolyonuza Ekleyin
</v-btn>
</template>
<script>
import { mapActions } from 'vuex';
export default {
props: {
selectedCoin: [],
count: {
type: Number,
default: 1
}
},
name: 'AddButton',
methods: {
...mapActions(['saveCoinToPortfolio']),
saveCoinToPortfolio() {
this.$store.dispatch('saveCoinToPortfolio', {data: this.selectedCoin, count: this.count})
}
}
}
</script>