将两个计算属性合二为一

Question

我有一个选择框和一个搜索字段来过滤我的数据表。我创建了两个计算属性——第一个是一个类别过滤器，它从 get 调用中获取 name 和 id，并将值与另一个调用中的值进行比较。第二个计算属性用于普通表搜索。我怎样才能将这两个组合成一个属性，以便我可以将它应用到桌子上？

计算：

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>