javascript - Vue table realtime update - Stack Overflow

admin管理员组

文章数量:1406060

I found some similar questions like this and this. But my problem is somewhat different. I'm polling data for table every second from my REST Api with axios. I need is the user to freely manipulate (i.e. order, sort and select) the rows when data updates. In general, when there is data update, all selections are removed and orders are lost.

I've created a local store with my data which I pass as a reference to my table and update it 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;
            });
        }

It works but I think it's overplicated. So could you tell me what is the best approach or may be table-ponent that could do binding automaticaly?

I found some similar questions like this and this. But my problem is somewhat different. I'm polling data for table every second from my REST Api with axios. I need is the user to freely manipulate (i.e. order, sort and select) the rows when data updates. In general, when there is data update, all selections are removed and orders are lost.

I've created a local store with my data which I pass as a reference to my table and update it 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;
            });
        }

It works but I think it's overplicated. So could you tell me what is the best approach or may be table-ponent that could do binding automaticaly?

• javascript
• vue.js

Share Improve this question Follow asked Jun 13, 2018 at 9:14 xnegxneg 1,36811 gold badge1717 silver badges2828 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

You can use keys in Vue to items in list. This will handle the refresh of your list and reuse and reorder existing elements.

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

As stated in the docs :

When Vue is updating a list of elements rendered with v-for, by default it uses an “in-place patch” strategy. If the order of the data items has changed, instead of moving the DOM elements to match the order of the items, Vue will patch each element in-place and make sure it reflects what should be rendered at that particular index.

This default mode is efficient, but only suitable when your list render output does not rely on child ponent state or temporary DOM state (e.g. form input values).

To give Vue a hint so that it can track each node’s identity, and thus reuse and reorder existing elements, you need to provide a unique key attribute for each item. An ideal value for key would be the unique id of each item.

I don't understand the code you posted, but I would treat the source array and the filter and sort columns as page state, in your local store. Then, create yourself a puted property on your vue ponent that orders and sorts the source array. Every time the source array is replaced, the puted property will update. You may also want to look at vue-keep-scroll, so the user's position on the page is preserved across updates.

I am not diminishing the value other answers but I found that Vuetify table does exact what I want.

本文标签： javascriptVue table realtime updateStack Overflow