How do you filter the table using the md-select?

Question

This is my code. It contains my html and JS code.

<script>
  const toLower = text => {
    return text.toString().toLowerCase()
  }

  const searchByState = (items, term) => {
    if (term) {
      return items.filter(item => toLower(item.state).includes(toLower(term)))
    }

    return items
  }

  const searchByCategory = (items, term) => {
    if (term) {
      return items.filter(item => toLower(item.category).includes(toLower(term)))
    }

    return items
  }

  export default {
    name: 'TableSearch',
    data: () => ({
      search: null,
      searchCategory:null,
      searched: [],

      users: [
       {
          name: "ABCD",
          state: "Selangor",
          category: "F&B"
        },
        {
          name: "KLM",
          state: "Penang",
          category: "Entertainment"
        },
        {
          name: "cvfd",
          state: "Johor",
          category: "H&B"
        }
      ]
    }),
    methods: {
      newUser () {
        window.alert('Noop')
      },
      searchOnTable () {
        this.searched = searchByState(this.users, this.search)
      }
    },
    searchOnTable () {
        this.searched = searchByCategory(this.users, this.searchCategory)
      },
    created () {
      this.searched = this.users
    }
  }
</script>

<template>
  <div>
    <md-table v-model="searched" md-sort="name" md-sort-order="asc" md-card md-fixed-header>
      <md-table-toolbar>
        <div class="md-toolbar-section-start">
          <h1 class="md-title">Users</h1>
        </div>

        <md-field md-clearable class="md-toolbar-section-end">
        <label for="state">State</label>
        <md-select placeholder="Search by State..." v-model="search" @input="searchOnTable" multiple>
        <md-option value="penang">Penang</md-option>
          <md-option value="selangor">Selangor</md-option>
          <md-option value="johor">Johor</md-option>
          <md-option value="sabah">Sabah</md-option>
          <md-option value="sarawak">Sarawak</md-option>
          <md-option value="perak">Perak</md-option>
          <md-option value="kedah">Kedah</md-option>
          <md-option value="pahang">Pahang</md-option>
          <md-option value="kelantan">Kelantan</md-option>
          <md-option value="terengganu">Terrenganu</md-option>
          <md-option value="melaka">Melaka</md-option>
          <md-option value="negeri sembilan">Negeri Sembilan</md-option>
          <md-option value="perlis">Perlis</md-option>
          <md-option value="kuala lumpur">Kuala Lumpur</md-option>
        </md-select>
        </md-field>

         <md-field md-clearable class="md-toolbar-section-end">
        <label for="category">Category</label>
        <md-select placeholder="Search by Category..." v-model="searchCategory" @input="searchOnTable" multiple>
        <md-option value="penang">Penang</md-option>
         <md-option value="f&b">F&B</md-option>
          <md-option value="h&b">H&B</md-option>
          <md-option value="entertainment">Entertainment</md-option>
          <md-option value="services">Services</md-option>
        </md-select>
        </md-field>
      </md-table-toolbar>

      <md-table-empty-state
        md-label="No users found"
        :md-description="`No user found for this '${search}' and '${searchCategory}' query. Try a different state and category`">
      </md-table-empty-state>

      <md-table-row slot="md-table-row" slot-scope="{ item }">
        <md-table-cell md-label="Merchant">{{ item.name }}</md-table-cell>
        <md-table-cell md-label="State">{{ item.state }}</md-table-cell>
        <md-table-cell md-label="Category">{{ item.category }}</md-table-cell>
      </md-table-row>
    </md-table>
  </div>
</template>

I am using Vue MD and I want to be able to select multiple state and the category at the same time. Right now I can only select one state and it will filter it out. I am new with Vue MD. Please help if anyone knows how to solve the problem. Thank you in advance.

score 2 · Accepted Answer · answered Oct 06 '19 at 17:13

2

In the searchOnTable function (the one inside methods), simply check if both state and category are filled and then perform the search accordingly.

searchOnTable() {
  if (this.search.length > 0 && this.searchCategory.length > 0) {
    this.searched = searchByState(this.users, this.search);
  }

answered Oct 06 '19 at 17:13

srdecny

593
3
5

I tried but it is now just filtering out by category and not the state. Plus, after the first filter, it is not working anymore. it says user not found. Do you have any more ways to filter the table? – Badass Devil Oct 07 '19 at 00:53
It is also filtering out one category only. I need to filter out multiple states and category. – Badass Devil Oct 07 '19 at 01:23
Yes, you need to supply a new search function. Something like this, for example: `const searchByStateAndCategory = (items, state, category) => { return items.filter(item => toLower(item.state).includes(toLower(state))).filter(item => toLower(item.category).includes(toLower(category))) }` – srdecny Oct 07 '19 at 06:14
Thank you a bunch. I manage to do it and it works. It was really helpful :) – Badass Devil Oct 08 '19 at 02:26

How do you filter the table using the md-select?

1 Answers1