时间戳

首页 > 解决方案 > Vue 表实时更新

javascript - Vue 表实时更新

问题描述

我发现了一些类似的问题，例如this和this。但我的问题有些不同。我正在使用 axios 从我的 REST Api 中每秒轮询表的数据。我需要的是用户在数据更新时自由地操作（即排序、排序和选择）行。一般来说，当有数据更新时，所有的选择都会被删除，订单也会丢失。

我用我的数据创建了一个本地存储，我将其作为对表的引用传递并像这样更新它：

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;
            });
        }

它有效，但我认为它过于复杂。那么你能告诉我什么是最好的方法，或者可能是可以自动绑定的表格组件吗？

标签： javascriptvue.js

解决方案

您可以使用Vue 中的键来访问列表中的项目。这将处理您的列表的刷新以及重用和重新排序现有元素。

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

如文档中所述：

当 Vue 更新使用 渲染的元素列表时v-for，默认情况下它使用“就地补丁”策略。如果数据项的顺序发生了变化，而不是移动 DOM 元素以匹配项的顺序，Vue 将就地修补每个元素并确保它反映应该在该特定索引处呈现的内容。

这种默认模式是高效的，但仅适用于您的列表渲染输出不依赖于子组件状态或临时 DOM 状态（例如表单输入值）的情况。

为了给 Vue 一个提示以便它可以跟踪每个节点的身份，从而重用和重新排序现有元素，您需要key为每个项目提供一个唯一的属性。的理想值key是每个项目的唯一 ID。

推荐阅读