时间戳

首页 > 解决方案 > Vue.js 表更新组件数据而不在选定的过滤器上重新渲染整个组件

vue.js - Vue.js 表更新组件数据而不在选定的过滤器上重新渲染整个组件

问题描述

我有一个单页仪表板应用程序。我一直在玩它，setInterval它非常适合只更新数据而不重新加载页面。我把 setInterval 函数放在里面mounted()，不确定它是否最好放在那里，但工作正常。

然而！这个 SPA 有很多过滤器。您可以搜索，可以选择下拉菜单，可以排序，等等。假设初始页面加载有 1000 行，您使用搜索栏将其缩小到一行/一个结果。现在 setInterval 运行，它将重新渲染所有 1000 行。这是方法（在methods: {}最初加载数据的部分和mounted()with中使用的方法中定义setInterval）：

getData: function (arg1, arg2) {
  API.getSomeData(arg1, arg2).then(resp => {
    getTicketData(resp.data);
    this.$data.loading = false;
  });
}

当涉及到 setInterval 时，有没有办法考虑过滤器？

任何和所有的见解都是值得赞赏的。

标签： vue.jsvue-componentsetinterval

解决方案

当您从 API 获取数据并对其进行过滤时，听起来您可能会覆盖相同的数据属性。如果是这种情况，您应该使用计算属性来向用户显示过滤后的记录。

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

    return this.apiData
  }

Where将在不覆盖其内容的情况this.filter()下进行过滤。然后您可以在您的模板（例如）中this.apiData进行迭代以向用户显示这些模板。tableRowsv-for="row in tableRows"

如果你想从你的 Vue 组件中删除一些这种逻辑，你可以考虑使用 Vuex 存储来从你的 API 获取/更新以及计算过滤器。

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

你的吸气剂会检查过滤器并返回任何相关的东西。Vuex getter 也可以用于计算属性。

推荐阅读