Search in multi-level menu navigation drawer

Question

The problem I have is my search function returns all the items from category where search phrase is occurring.

Code pen: https://codepen.io/simon.network/pen/GRGeNXB?editors=0010 `

computedItemsList() {
      let searchString = this.search.toLowerCase()
      return this.menu_items_list.filter(function search(row) {
        return Object.keys(row).some((key) => {
          if (typeof row[key] === 'string' && key === 'title') {
            return row[key].toLowerCase().indexOf(searchString) > -1
          } else if (row[key] && typeof row[key] === 'object') {
            return search(row[key])
          }
          return false
        })
      })
    }

`

I'm using recurrence search function which looks for the title in child elements, maybe it could be easier solution then I choose.

Answer 1

you can use like this

  methods:{
      filterSubItems(subItems){
         let searchString = this.search.toLowerCase();
         if(!searchString){
          return subItems;
        }
        return subItems.filter((row)=> {
          return row.title.toLowerCase().includes(searchString);
        });
      }
  },
  computed:{
    
    computedItems() {
      let searchString = this.search.toLowerCase();
      if(!searchString){
        return this.menu_items_list;
      }
      return this.menu_items_list.filter((row)=> {
    
        return row.title.toLowerCase().includes(searchString) ||(this.filterSubItems(row.items).length>0)
      })
    
    }
  }

and template

<v-list-item v-for="child in filterSubItems(item.items)" :key="child.title" :to="child.link" dense link>
  <v-list-item-content>
    <v-list-item-title>{{ child.title }}</v-list-item-title>
  </v-list-item-content>
</v-list-item>