Question

我在VUE中具有排序和分页计算功能，可以在表格中显示

sortedTransactions: function() {
      return this.transactions
          .sort((a, b) => {
            let modifier = 1;
            if (this.currentSortDir === "desc") modifier = -1;
            if (a[this.currentSort] < b[this.currentSort]) return -1 * modifier;
            if (a[this.currentSort] > b[this.currentSort]) return 1 * modifier;
            return 0;
          })
          .filter((row, index) => {
            let start = (this.currentPage - 1) * this.pageSize;
            let end = this.currentPage * this.pageSize;
            if (index >= start && index < end) return true;
          });
      }

所以我希望能够搜索数据，然后根据用户输入显示结果

searchResults() {
      const search = this.sortedTransactions.filter(transaction => { 
          return transaction.user_id.toLowerCase() === this.searchTable
        });
        this.sortedTransactions = search;
    }

当然，我需要在数据表中更新搜索结果，但看不到这样做的方法。

Answer 1

您应该修改数据属性transactions而不是更新计算的属性，因为它不正确，您正在执行的操作 ~~this.sortedTransactions = search;~~ 因为计算的属性不可更改，因此您的函数应该像：

  searchResults() {
  const search = this.transactions.filter(transaction => { 
      return transaction.user_id.toLowerCase() === this.searchTable
    });
    this.transactions = search;
}

和computed属性sortedTransactions将自动更新

Answer 2

在您的方法中定义serchResults（），侦听@key事件，并将其传递给该方法以过滤结果。

从函数Vue更新计算方法

2 个答案: