Обновление вычисляемого метода из функции Vue

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

Определите serchResults () в вашем методе, прослушайте событие @key и передайте его методу для фильтрации результата.

Answer 2

Вы должны изменить свойство данных transactions вместо обновления вычисляемого, потому что это неправильно, что вы делаете this.sortedTransactions = search;, поскольку вычисляемые свойства не являются изменяемыми, поэтому ваша функция должна выглядеть следующим образом:

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

и свойство computed sortedTransactions будут обновлены автоматически