Update a computed method from a function Vue

Question

I have a sort and pagination computed function in VUE which and allows displaying in a table

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

So I want to be able to search the data and then display the results based on the user input

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

Of course, I need the search results to update in the data table but can't see a way to do it.

Boussadjra Brahim Boussadjra Brahim · Accepted Answer · 2019-01-01T18:53:59

You should modify the data property transactions instead of updating computed one because it's not correct what you're doing ~~this.sortedTransactions = search;~~ since computed properties are not mutable, so your function should be like :

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

and the computed property sortedTransactions will be updated automatically

Update a computed method from a function Vue

2 Answers