vue.js - 如何使用 md-select 过滤表格？

Question

这是我的代码。它包含我的 html 和 JS 代码。

<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>

我正在使用 Vue MD，我希望能够同时选择多个状态和类别。现在我只能选择一个状态，它会过滤掉它。我是 Vue MD 的新手。如果有人知道如何解决问题，请提供帮助。先感谢您。

Answer 1

在 searchOnTable 函数(methods 中的函数)中，只需检查状态和类别是否都已填充，然后相应地执行搜索。

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