vue2-filter-sublist

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 filteredSalesByItemName">
      {{sale.type}}
         <div v-for=" sale in filterItemsByName(sale.item)">
           - {{sale.name}}
        </div>
        
    </div>
</div>

JavaScript

new Vue({
  el: "#container",
  data: {
    value: "",
    sales: [
      {
        id: 1,
        type: "Person1",
        
        item: [
          {
            name: "Wheel"
          },
          {
            name: "Handle"
          }
        ]
      },
      {
        id: 2,
        type: "Person2",
           item: [
          {
            name: "Seat"
          },
          {
            name: "Handle"
          }
        ]
      }
    ]
  },
  
  methods: {
     filterItemsByName (items){
      return items.filter((item)=>{
          return item.name.toLowerCase().includes(this.value.toLowerCase());
        })
     } 
  },
   computed: {
    filteredSalesByItemName() {
      return this.sales.filter((sale) => {
        return sale.item.some((item)=>{
          return item.name.toLowerCase().includes(this.value.toLowerCase());
        })
      });
    },
  },
});