Keep your Vue table continuously updated in real-time

While I have come across similar questions like this and this, my issue presents a unique challenge. I am polling data for a table every second from my REST Api using axios. Despite this, I want the user to be able to freely manipulate (e.g. order, sort, and select) the rows even when the data updates. Typically, when there is a data update, all selections are cleared, and orders are lost.

To address this, I have created a local store with my data which I pass as a reference to my table. The update process looks like this:

setStrategies(newStrategies) {
        if (this.state.strategies.length == 0) {
            newStrategies.forEach(strategy => {
                this.state.strategies.push(strategy)
            });
        } else {
            this.state.strategies.forEach(strategy => {
                var newStrategy = newStrategies.find(x => x.strategyName === strategy.strategyName);
                strategy.status = newStrategy.status;
                strategy.lastPingTime = newStrategy.lastPingTime;
            });
        }

While this solution is functional, I believe it may be overly complex. Hence, I am seeking advice on the best approach or a table component that could handle the binding automatically. Any suggestions?

Answer №1

If you're working with Vue, utilizing keys is crucial when handling lists. These keys are essential for managing the refresh of your list and efficiently reusing and reordering existing elements.

<div v-for="item in items" :key="item.id">
  <!-- content -->
</div>

According to the documentation :

When Vue updates a list of elements rendered with v-for, it typically uses an "in-place patch" strategy. This means that if the order of the data items changes, Vue will patch each element in-place rather than reordering them to match the data order. This strategy is efficient but may not be suitable if your list output depends on child component state or temporary DOM state (e.g. form input values).

To assist Vue in tracking each node's identity for reusing and reordering existing elements, you need to assign a unique key attribute to each item. Ideally, this key should be the unique id of each item.

Answer №2

Although the code you shared is a bit confusing to me, I would suggest treating the source array and the filter and sort columns as page state in your local store. You can then create a computed property in your Vue component that organizes and sorts the source array. This way, every time the source array is changed, the computed property will automatically update. Additionally, you might consider checking out vue-keep-scroll, which helps preserve the user's position on the page during updates.

Answer №3

In my opinion, the Vuetify table is the perfect solution for my needs, even though there are other valuable alternatives available.

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

Utilizing Axios recursion to paginate through an API using a cursor-based approach

Is there a way to paginate an API with a cursor using axios? I am looking to repeatedly call this function until response.data.length < 1 and return the complete array containing all items in the collection once the process is complete. Additionally, I ...

Sharing session data between controller and view in an Express.js application

When logging in with the code below in the express controller to redirect to the main page: req.session.user = user.userLogin; if (req.session.user=='Admin') { global.loggedAdmin = user.userLogin; } else { global.loggedUser = user.us ...

Fetching real-time Twitter search feeds through dynamic AJAX requests

Previously, I successfully used JSON to retrieve hash tag feeds from Twitter and Facebook. However, currently the feeds are not updating dynamically, indicating a need for Ajax implementation. Unfortunately, my lack of knowledge in Ajax is hindering this ...

Express JS: The requested resource does not have the 'Access-Control-Allow-Origin' header

Currently, I am encountering an issue with my API running on a server and the front-end client attempting to retrieve data from it. Previously, I successfully resolved the cross-domain problem, but now it seems like something has changed as I am receiving ...

angular.js watch() method is not functioning properly during a JSON call

I am trying to trigger a method whenever the value of my $http.selectedSong (model value) changes, but for some reason it is not working. Any ideas on why this could be happening?: app.controller('songController', ['$http', function($h ...

Next.js: Generating static sites only at runtime due to getStaticProps having no data during the build phase, skipping build time generation

I am looking to customize the application for individual customers, with a separate database for each customer (potentially on-premise). This means that I do not have access to any data during the build phase, such as in a CI/CD process, which I could use ...

Adjust CRM 2011 settings to allow bulk editing exclusively for specific entities

Currently, my goal is to restrict bulk editing for most entities except for the "Campaign Response" entity. To accomplish this task, I have taken the following steps: Disabled the Out of the Box (OOTB) edit button globally (due to restrictions on editin ...

How can I assign a value other than a string to a placeholder or vue property?

As I develop a content management system using Nuxt and Pug/Jade, I am looking for an efficient way to create a list of input fields for users to enter information. My idea is to use the v-for directive to render the list and dynamically set the value and ...

Guide on replacing buttons with <a> tags in express.js posts

I've incorporated handlebars as my chosen templating engine and I'm utilizing buttons to trigger app.post() in my JavaScript file. <form method="POST" action="/smo_assessment"> <div class="container" id="div1"> <h3 id="header" ...

Should the hourly charge schedule be based on user input and be created from scratch or utilize existing templates?

I have hit a roadblock while creating a charging schedule based on user input for my project. I am debating whether to search for and modify an existing plugin or develop it from scratch. The schedule involves solar charging electric cars between 7am and ...

Using JSON Object for Default Selection in an Angular Dropdown Menu

Here is some code I have that fills in a specific select item on a webpage: <select ng-model="activity.selectedParent" ng-options="parent as parent.title for parent in parents track by parent._id"></select><br> I'm curious if there ...

Encountering Problem with Office Object Access in Vue.js Outlook Add-in

Just getting started with vue.js and encountering an issue when trying to access the Office object within Vue methods. In the code snippet below, calling load() from created function works fine, but attempting to call it from this.loadProps() does not wor ...

Using the Angular translate filter within a ternary operator

I am currently working on translating my project into a different language. To do this, I have implemented the Angular Translate library and uploaded an external JSON file containing all the translations. Here is an example of how it looks: { "hello_wor ...

Struggle arising from the clash between a customized image service and the built-in image element

Dealing with a custom Angular service called Image, I realized that using this name poses a problem as it clashes with Javascript's native Image element constructor, also named Image. This conflict arises when attempting to utilize both the custom Im ...

The issue with the Woocommerce quantity increment buttons not functioning properly persists after an AJAX refresh, and the automatic load feature only activates after two

I've hit a brick wall with this particular issue. Many people have suggested solutions, but none seem to be effective for me. My situation probably resonates with quite a few individuals: I decided to customize the WooCommerce quantity input (/global ...

Show a button using CSS when the cursor is hovering

Expressing my gratitude to everyone! I need assistance with implementing a function in reactJS where the <button /> remains hidden during page loading and reveals itself when hovered over. Despite trying various methods, I have been unable to resolve ...

The issue code R10, indicating a boot timeout, has arisen as the web process failed to connect to $PORT within 60 seconds of initiating on Heroku platform

After deploying my Node.js WebApp to Heroku, I encountered the following error: 2021-06-01T09:19:42.615419+00:00 heroku[web.1]: State changed from crashed to starting 2021-06-01T09:19:47.259832+00:00 heroku[web.1]: Starting process with command `node app.j ...

A dynamic update of the outlined property in a Vuetify v-btn

I am working with a Vuetify button component. <v-btn class="ma-2" tile :outlined="is_outlined" color="success"> <v-icon left>mdi-pencil</v-icon> Edit </v-btn> I am trying to programmatically change the outlined property of th ...

Angular.js: Navigating through HTML content

I am attempting to display a list of HTML data using angular.js and would like to implement ngInfiniteScroll. Here is the template I created: update: <div class="scroll" id="antTalkList" talk-type="total" view-type="total" infinite-scroll=' ...

A guide on successfully handling errors while utilizing S3.getsignedurlpromise() in node.js

I am faced with a challenge in my project involving a node.js server that downloads images from an s3 bucket and serves them to a React client. The issue arises when the wrong file key is sent to the S3 client, as I want to handle this error gracefully by ...