我怎样才能让 vuejs 过滤器为数组中的嵌套项目工作？

Question

在 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());
      });
    },
  },
});

Answer 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)
    },

我的方法是对 object 搜索进行分离。首先，我们搜索哪些 parents 具有匹配值并将其存储在变量中。然后再次使用 object 搜索 child item。和第一个没有太大区别，我们也过滤了parents，但是检查的值在它的child上，所以我们只需要知道child是否为空。这个过程的 return 是过滤后的数组 sales 与第一次搜索相同。

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

我怎样才能让 vuejs 过滤器为数组中的嵌套项目工作？

How can i get vuejs filter work for nested Items inside the array?

javascript

arrays

vue.js

multidimensional-array

v-model