Объедините два вычисленных свойства в одно - PullRequest
Новая
       23

Объедините два вычисленных свойства в одно

0 голосов
/ 12 июня 2019

У меня есть поле выбора и поле поиска для фильтрации по моей таблице данных. Я создал два вычисляемых свойства - первое - это фильтр категорий, который получает имя и идентификатор из вызова get и сравнивает значения со значениями из другого вызова. Второе вычисляемое свойство предназначено для обычного поиска в таблице. Как я могу объединить эти два в одно свойство, чтобы я мог применить его к таблице?

Компьютерная: 

computed: {
  filteredTableData() {
      if (this.selectedId !== null) {
          const filtered = this.tableData.filter(d => {   
              let mediaTypeJ = this.mediaTypeId.find(x => {
              return x.ID === this.selectedId;
          });  
      return d.mediaTypeName === mediaTypeJ.name;
      });
      return filtered
      }
  return this.tableData
  },

  searchFilter() {
      return this.tableData.filter (item => {
      return 
  item.name.toLowerCase().match(this.search.toLowerCase()) ||     
  item.level.toLowerCase().match(this.search.toLowerCase()) ||      
  item.house.toLowerCase().match(this.search.toLowerCase())
   });  
  },
 }

Html 

<tbody>       
    <tr v-for="(item, index) in filteredTableData">  
        <td>{{ item.name }}</td>  
        <td>{{ item.level }}</td>  
        <td>{{ item.house }}</td>  
    </tr>
</tbody>

Спасибо!

Ответы [ 2 ]

0 голосов
/ 12 июня 2019

Попробуйте это: 

  searchFilter() {
      return this.filteredTableData.filter (item => {
        return 
          item.name.toLowerCase().match(this.search.toLowerCase()) ||     
          item.level.toLowerCase().match(this.search.toLowerCase()) ||      
          item.house.toLowerCase().match(this.search.toLowerCase())
      });  
  },

Отфильтруйте filteredTableData как searchFilter, затем используйте его в шаблоне. 

<tbody>       
    <tr v-for="(item, index) in searchFilter">  
        <td>{{ item.name }}</td>  
        <td>{{ item.level }}</td>  
        <td>{{ item.house }}</td>  
    </tr>
</tbody>
0 голосов
/ 12 июня 2019

Вы бы не совмещали их. Ваша функция фильтра должна учитывать оба свойства, и она будет срабатывать при любом изменении. Таким образом, по сути ваш вычисляемый фильтр является комбинированным свойством.

...