将两个计算属性合二为一

Question

我有 select 框和一个搜索字段来过滤我的数据 table。我创建了两个计算属性 - 第一个是类别过滤器，它从 get 调用中获取名称和 ID，并将值与另一个调用中的值进行比较。第二个计算属性用于正常 table 搜索。我如何将这两者合并为一个属性以便我可以将其应用到 table?

计算：

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>

谢谢！

Answer 1

你不会把它们结合起来。你的过滤器函数应该只考虑这两个属性，它会在任何一个改变时触发。所以本质上你的计算过滤器是组合属性.

Answer 2

试试这个：

  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>

将两个计算属性合二为一

Combine two computed properties into one

javascript

json

vue.js

computed-properties

axios