Vue.js表更新组件数据，而不在选定过滤器上重新呈现整个组件

我有一个单页仪表板应用程序。我一直在玩

setInterval

，它只需更新数据而不重新加载页面，效果非常好。我将setInterval函数放在

mounted（）

中，不确定它是否最好放在那里，但工作正常

然而！这个水疗中心有很多过滤器。你可以搜索，你可以选择下拉列表，你可以排序，等等。假设初始页面加载有1000行，您使用搜索栏将其缩小为一行/一个结果。现在setInterval运行，它将重新渲染所有1000行。这就是方法（在最初加载数据的

methods:{}

部分中定义，以及在

mounted（）

with

setInterval

中使用的方法）：

当涉及到设置间隔件时，是否有办法解释过滤器

---

非常感谢您的所有见解。

从API获取数据和对其进行筛选时，听起来您可能正在覆盖相同的数据属性。如果是这种情况，则应使用computed属性向用户显示过滤后的记录

computed: {
  tableRows() {
    if (this.filters)
      return this.filter()

    return this.apiData
  }

其中

this.filter（）

将过滤

this.apiData

而不覆盖其内容。然后，您可以迭代模板中的

表格行

（例如

v-for=“表格行中的行”

）以向用户显示这些表格行

如果您想从VUE组件中删除一些逻辑，您可以考虑使用VUEX存储来从API中获取/更新，也可以计算过滤器。

this.$store.dispatch('fetch_on_interval', { interval: 1000 })
this.$store.dispatch('set_filters', { ...filters })
this.$store.getters('table_data')

---

你的getter将检查过滤器并返回任何相关的内容。Vuex getter也可以用于计算属性。

Re:“现在setInterval运行，它将重新渲染所有1000行。”-那么你是说，当筛选出999行时，你不希望它重新渲染所有1000行，而只渲染1行吗？你能显示你的筛选代码是什么样子吗？

this.$store.dispatch('fetch_on_interval', { interval: 1000 })
this.$store.dispatch('set_filters', { ...filters })
this.$store.getters('table_data')