Enhancing v-data-table by implementing a dynamic counter feature, complete with buttons for increasing and decreasing the displayed number

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>

Answer №1

It appears that you are currently using only one counter variable for all rows in your code. To optimize this, consider integrating the counter into your coin data structure. Alternatively, you can create a separate object called coinCounter to store the counter value based on the coin key (coin.symbol). Here is an example of how you can implement this:

<v-btn icon x-small text @click.stop="coinCounter[coin.symbol]++">...

or

<v-btn icon x-small text @click.stop="coin.counter++">...

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The ElementNotInteractableException was thrown because the element could not be accessed via the keyboard when trying to input text into the FirstName field on Facebook

The issue is as follows: Exception encountered in thread "main" org.openqa.selenium.ElementNotInteractableException: Element is not accessible via keyboard Here is the code snippet: System.setProperty("webdriver.gecko.driver"," ...

Having issues with AngularJS ng-if when implemented within a Form

Is there a way to hide my form after it has been submitted using ng-if? I am facing an issue where clicking the 'See' button toggles the form on and off, but the same functionality does not work with the 'Add' button. Any insights on wh ...

There appears to be a syntax error in the Values section of the .env file when using nodejs

I have been working on implementing nodemailer for a contact form. After researching several resources, I came across the following code snippet in server.js: // require('dotenv').config(); require('dotenv').config({ path: require(&apos ...

Using Flask to trigger a Python function that requires input parameters when a button is clicked

I am working on a Flask web application that includes a download button. Instead of triggering a JavaScript function, I want the button to execute a Python method. This Python method should take the recently modified HTML code from the webpage as input. H ...

Incorrect sequencing in Chart.js chart with time displayed on the horizontal axis

Hey there, I'm currently working on displaying some data using chart.js in angularjs. However, I seem to be facing an issue with the ordering of my data which is resulting in a strange looking chart like this: https://i.stack.imgur.com/F6phH.png Her ...

VueJS: Obtaining parent prop in child component when accessing the child component directly via vue-router without utilizing a centralized store like vuex or eventBus

In this codesandbox demo, the main component called home has a subcomponent called addItem. The parent component passes an array (as a prop) to the child component, allowing the child to add items to the parent's list. This is the typical way of passi ...

Retrieving intricate JSON data from a specific web address

I need assistance in extracting and printing the date value from the JSON content available at the specified URL. Specifically, I am looking to retrieve the date value of "data.content.containers.container.locationDateTime" only if the "data.content.conta ...

The database server is not appearing on the main.js page of the client

My client's main.js file contains code that is meant to display previous form entries on the webpage, but after submitting the form, no entries appear on the HTML page. My server is running on port 7777 and the root route works in Postman, as does the ...

Experiencing CORS issue on the frontend while using Django backend

I am currently accessing a Django REST POST API http://127.0.0.1:8000/api from my frontend located at http://127.0.0.1:5500/index.html. I have set up django-cors-headers and ensured that the frontend's image_upload.js, backend's settings.py, view ...

Guide on utilizing Vue to trigger an API call when the input box loses focus

I am currently facing challenges while trying to learn vue, and I am not sure how to proceed. I would greatly appreciate any assistance! To begin with, I want to acknowledge that my English may not be perfect, but I will do my best to explain my issue tho ...

What are the different ways to utilize arrays of nested maps within arrays of structures?

I am working with a code that creates arrays of structures containing arrays of maps. My main question is how to add a new value to the map and update the value of an existing key. struct Line { map<int, vector<float>> *con_inf; ...

What is the best way to transfer information from a parsed CSV file into select dropdown boxes?

I utilized JavaScript to parse the CSV file. Here is an example of a CSV: Year,Model,Mileage,Color,Vin,Image 2012,BUICK LACROSSE FWD V6 FFV 4D SEDAN LEATHER,113046,BROWN,1G4GC5E34CF177752,https:imagelink Below is the code used for parsing: $(document). ...

Mastering the alignment of Material-UI Menu items

When using the menu and menu item components of material-ui to create a select dropdown menu, I encountered an unusual issue where the dropdown menu always expands to the left side of the box, as shown in the image below: https://i.stack.imgur.com/ykRrp.jp ...

Creating a collection of text entries based on user responses

In my simple code, I am taking user input as a string from the terminal and then dividing it into an array of strings character by character. Whenever a numeric character is encountered, a new string in the array is created. For example, if we run ./progra ...

The sorting function in Vue.js, _.orderBy, seems to be having trouble sorting

UPDATE This is the json data retrieved through an API using axios. bannerData= [ { "id": 118, "title": "Geruchsbel\u00e4stigung", "location": "DOR", "pressInformation": [ { ...

What is the process for enabling HLS.js to retrieve data from the server side?

I have successfully implemented a video player using hls.js, and I have some ts files stored in https:/// along with an m3u8 file. To read the content of the m3u8 file, I used PHP to fetch it and sent the data to JavaScript (res["manifest"] = the content ...

Javascript time intervals run rapidly during tab changes

I am facing an issue where my neck is constrained at regular time intervals. I have a function that helps me calculate time one second at a time: Header.prototype= { time_changed : function(time){ var that = this; var clock_handle; ...

Combine two or more lists/arrays while maintaining the order from the smallest element to the largest element

Looking for some assistance here. I am working with an array that needs to be sorted in different threads. Once the sorting is complete, I end up with several sublists of sorted elements, such as: -124.5 -9.03 0 13.2 -99.3 12.6 189.034 200.0 There may b ...

An error will occur if you try to modify the state of a component from outside the component

Creating a modal component that triggers a bootstrap modal from any section of the application and then defines custom states for that component externally. It is functional, however, an error message consistently appears upon opening the modal, and I am u ...

Utilizing Laravel with Vue and implementing VueRouter in history mode

I am currently working on an e-commerce project using Laravel, Vue, and Vue Router. My goal is to implement Vue Router with history mode, but I'm encountering some issues. Below is the code snippet: new Vue({ el: '#app', router: n ...