[英]Search in multi-level menu navigation drawer
我遇到的问题是我的搜索 function 返回出现搜索短语的类别中的所有项目。
码笔: 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
})
})
}
`
我正在使用重复搜索 function 来查找子元素中的标题,也许这比我选择的解决方案更简单。
你可以这样使用
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.