[英]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.