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

【问题标题】：How can i get vuejs filter work for nested Items inside the array?如何让 vuejs 过滤器为数组内的嵌套项工作？
【发布时间】：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());
      });
    },
  },
});

【问题讨论】：

标签： javascript arrays vue.js multidimensional-array v-model

【解决方案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数组，和第一次搜索一样。

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

【讨论】：