[Vuejs]-Search in multi-level menu navigation drawer

by

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>
👤Salim Baskoy

Leave a comment