vue-top-and-nested-list-search

search both top level property and filter a list with the same term as a filter.

by lid0

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.min.js"></script>
<div id="container">
  <input type="text" id="container" placeholder="enter text" v-model="value">
  <p>{{ value }}</p>
<!--   <div v-for=" sale in filteredList">
    {{sale.type}}
  </div> -->
  

<hr>
    <template v-for="item in searchTypeAndItem">
      {{item.type}}
        <ul>
      <li v-for="item2 in item.items">{{item2.name}}</li>
     
    </template>
  </ul>
</div>

JavaScript

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: {
    
    // based on the filteredList, perform additional 
    searchTypeAndItem() {
      // build search result [{type:"", items:[],...}]
      var searchResult = [];
      this.filteredList.forEach((sale) => {
        let s = { type: sale.type, items: [] }
        searchResult.push(s); 
        let items = sale.item.filter((item)=>item.name.toLowerCase().includes(this.value.toLowerCase() ))
        s.items = items
      });
      return  searchResult
    },
     
     
    // filter list by search term
    filteredList() {
      //filter list with a matching type or has item match
      return this.sales.filter((sale) => {
        let typeInclude = sale.type.toLowerCase().includes(this.value.toLowerCase()) 
        let itemInclude =  sale.item.some((s)=>{ return s.name.toLowerCase().includes(this.value.toLowerCase())});
        return typeInclude  ||  itemInclude
      });
    },
  },
});