Поиск нескольких полей в таблице в Vue.js с другой v-моделью

Question

Я новичок в vue.js.Я пытался отфильтровать столбцы таблицы, используя несколько полей поиска.У меня есть разные поля поиска и соответствующие им v-модели для разных столбцов в таблице.Я хочу включить поиск по каждому столбцу

Я попробовал следующие решения: 1. Vue.js filterBy для поиска по нескольким полям 2. Как искать по нескольким полям вVue.js 2

Используя два вышеупомянутых решения, я придумал следующее:

<p>
  <label>First Name</label>
  <input  type="text" placeholder="Enter firstname" v-model="First" />
</p>

<p>
  <label>Last Name</label>
  <input type="text" placeholder="Enter the last Name" v-model="Last" />
</p>

<p>
  <label>CustomerId</label>
  <input type="text" placeholder="Enter the CustomerId" v-model="CustomerId" />
</p>


<table id="clients">
  <thead>
    <tr>
      <th width="40%">First Name</th>
      <th width="20%">Last Name</th>
      <th width="20%">CustomerId</th>
    </tr>
  </thead>

  <tbody v-for="customer in filteredCustomers.slice(0,20)">

    <tr>
      <td>{{customer.first}}</td>
      <td>{{customer.last}}</td>
      <td>{{customer.id}}</td>

    </tr>

  </tbody>
</table>

Сценарий:

export default {
props:['showMod'],

data() {

return {
  id: '',
  First: '',
  Last: '',
  CustomerId: '',
  categories: []
}
},

computed: {

  filteredCustomers: function () {
    var self = this;
    return this.categories.filter(function (cust) {
      return cust.first.toLowerCase().indexOf(self.First.toLowerCase()) >-1 || cust.last.toLowerCase().indexOf(self.Last.toLowerCase()) >-1
  });
  }

Я изменяю код, чтобы включить поиск только по одному полю, он работает, но перестает работать при попытке поиска по нескольким полям.Я не знаю, что я делаю не так в этом.

Редактировать: я смог заставить этот поиск работать независимо, добавив "если"

  filteredCustomers: function () {
    var self = this;
    return this.categories.filter(function (cust) {
   if (self.First) {
      return cust.first.toLowerCase().indexOf(self.First.toLowerCase()) > -1
   }
    if (self.CustomerId) {
       return cust.clientId.toLowerCase().indexOf(self.CustomerId.toLowerCase()) > -1 
   }

   return cust.last.toLowerCase().indexOf(self.Last.toLowerCase())>-1 
  });

Однако, я не мог получитьдва условия фильтра работают одновременно, например, сначала поиск по имени, а затем поиск по фамилии.

Answer 1

Вам просто нужно настроить логику:

filteredCustomers() {
    return this.categories.filter(customer => {
        return (!this.First || customer.first.toLowerCase().includes(this.First.toLowerCase()))
            && (!this.Last || customer.last.toLowerCase().includes(this.Last.toLowerCase()))
    });

Вы также можете использовать регулярные выражения и .match(), если вы не хотите беспокоиться о преобразовании в нижнем регистре.