vue.js 在多级菜单导航抽屉中搜索

pn9klfpd 于 2022-12-14 发布在 Vue.js

关注(0)|答案(1)|浏览(130)

我的问题是我的搜索功能返回所有项目从类别中搜索短语发生。
密码笔：https://codepen.io/simonsnetwork/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
        })
      })
    }

`
我正在使用递归搜索功能，它在子元素中寻找标题，也许它可以更容易的解决方案，然后我选择。

vue.js

来源：https://stackoverflow.com/questions/74728875/search-in-multi-level-menu-navigation-drawer

1条答案

按热度按时间

p4rjhz4m1#

您可以这样使用

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

和模板

<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>

赞(0）回复(0）举报 2022-12-14

我来回答

vue.js 在多级菜单导航抽屉中搜索

1条答案

相关问题

热门标签

最新问答