如何让 vuejs 过滤器为数组内的嵌套项工作？

Posted 2023-02-22

【中文标题】如何让 vuejs 过滤器为数组内的嵌套项工作？

【英文标题】：How can i get vuejs filter work for nested Items inside the array?

【发布时间】：2021-05-25 09:46:44

【问题描述】：

在Vuejs 中有一个input 字段，用户可以输入文本来搜索项目。

代码在正常搜索时有效。 如何让过滤器适用于嵌套项目，以便用户也可以根据项目值输入搜索？

例如：如果用户输入 Seat 数组应该是

sales:[
  
        id: 2,
        type: "Bike2",
        number: 3000,
           item: [
          
            id: 400,
            name: "Seat"
          ,
          
            id: 200,
            name: "Handle"
          
        ]
      ]

Codepen Link

html：

<div id="container">
  <input type="text" placeholder="enter text" v-model="value">
  <p> value </p>
  <div v-for=" sale in filteredList">
    sale.type
  </div>

  <!--     <div v-for=" sale in filteredNestedList">
      sale.type
    </div> -->
</div>

过滤：

new Vue(
  el: "#container",
  data: 
    value: "",
    sales: [
      
        id: 1,
        type: "Bike1",
        number: 2000,
        item: [
          
            id: 100,
            name: "Wheel"
          ,
          
            id: 200,
            name: "Handle"
          
        ]
      ,
      
        id: 2,
        type: "Bike2",
        number: 3000,
        item: [
          
            id: 400,
            name: "Seat"
          ,
          
            id: 200,
            name: "Handle"
          
        ]
      
    ]
  ,
   computed: 
     //Nested
    filteredNestedList() 
      return this.sales.filter((sale) => 
        return sale.item.filter((item)=>
          return item.name.toLowerCase().includes(this.search.toLowerCase());
        )
      );
    ,
     
     
    //Works for items which are not nested
    filteredList() 
      return this.sales.filter((sale) => 
        return sale.type.toLowerCase().includes(this.value.toLowerCase());
      );
    ,
  ,
);

【参考方案1】：

试试这个。

    filteredNestedList() 
      if (this.value == '') return this.sales
      const parents = this.sales.filter((sale) => 
        return sale.type.toLowerCase().includes(this.value.toLowerCase());
      );
      const childs = this.sales.filter((sale) => 
          return sale.item.filter((it) => 
            return it.name.toLowerCase().includes(this.value.toLowerCase())
          ).length;
      );
      console.log(childs)
      return parents.concat(childs)
    ,

我的方法是对对象搜索进行分离。首先，我们搜索哪些父母有匹配值并将其存储在一个变量中。 然后再次进行对象搜索以查找孩子item。与第一个没有太大不同，我们也过滤了父母，但检查的值在它的孩子身上，所以我们只需要知道孩子是否为空。这个过程的返回是过滤后的sales数组，和第一次搜索一样。

最后一步，只需合并我们从这两个过滤中得到的数组。