[Vuejs]-Sorting a filtered table as computed property

by

0👍

✅

After playing around with <md-table> a bit more, it turns out you don’t actually need computed for sortColumn and sortOrder. You do need to use .sync modifier, though, as outlined in the docs.

And you have to provide an empty setter (md-table will try to assign to the computed when it’s changed). However, you don’t need to assign anything, as sortColumn and sortOrder change accordingly and your getter reacts to those changes.

I added a watch which resets sortOrder every time the sortColumn is changed – other than that, it’s pretty clean.

working demo.

Relevant code:

import { sortBy } from 'lodash-es';

{ 
  data: () => ({
    searchTerm: "",
    searchColumn: "corso",
    sortColumn: "corso",
    sortOrder: "asc",
    items: [...]
  }),
  computed: {
    filteredItems() {
      return this.items.filter(
        item => this.searchColumn
          .split(".")
          .reduce((obj, prop) => obj[prop], item)
          .toLowerCase()
          .indexOf(this.searchTerm.toLowerCase()) > -1
      );
    },
    orderedItems: {
      get: function() {
        return sortBy(this.filteredItems, this.sortColumn);
      },
      set: () => {}
    }
  },
  watch: {
    sortColumn() {
      this.$nextTick(() => (this.sortOrder = "desc"));
    }
  },
}

Leave a comment