基于 n 嵌套数组按名称过滤
Posted
技术标签:
【中文标题】基于 n 嵌套数组按名称过滤【英文标题】：Filtering by name based on a n nested array 【发布时间】：2020-07-04 02:01:39 【问题描述】：从昨天开始，我一直在尝试按项目名称进行过滤，但一直无法正常工作。这是我一直在使用的示例数组。我可以按类别过滤，但不能按项目过滤，只返回匹配的项目。基本上我有一个绑定到我的 serach 输入的计算属性，我能够获取所有项目，但是一旦我输入一个字符，它就不能正确过滤它。
我的标记：
<div class="col-3 mb--20">
<div class="input-group-over pl--10 round">
<input v-model="search" type="text" class="form-control form-control-sm iqs-input" data-container=".iqs-container" value="" placeholder="Search">
<span class="fi fi-search btn btn-sm pl--12 pr--12 text-gray-500"></span>
</div>
</div>
<div v-for='(cat, index) in menu' :key="index">
<h5 class="text-left m-4"><b>cat.name</b></h5>
<div class="row">
<div v-for='(item, index2) in cat["items"]' :key="index2" class="col-lg-6 col-md-12 mt-2">
<div class="col-12 border pointer">
<div @click="test" class="p-2">
<div class="d-flex justify-content-end">
<span class="mr-auto"><b>item.name</b></span>
<span><b>$item.price</b></span>
</div>
<div class="text-left text-muted pt-1">
<div class="d-flex justify-content-start">
<img :src="item.img" class="img-fluid pr-3" >
<span class="crop-text">item.desc</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
我的数组：
const m =
"menu": [
"categories": [
"name": "Black Angus Burgers",
"position": 1,
"id": 1,
"items": [
"desc": "Bring home the bacon, but make sure that bacon is hickory smoked and on top of cheddar and 1/3 lb. of chargrilled Black Angus beef. This burger\"s name explains itself. Of course, you can also top it with crisp lettuce, tomatoes and anything else.",
"img": "https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/bacon-cheddar-burger.png?mtime=20160801105417",
"name": "1/3 lb Bacon Cheddar Burger",
"price": 11
,
"desc": "A classic burger just like dad used to make. That is, if your dad was a crowd-pleasing grillmaster who used Black Angus beef topped with garden-fresh lettuce, lush tomatoes and crunchy dill pickles. Apologies to dads everywhere.",
"img": "https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/classic-burger.png?mtime=20160801105924",
"name": "Back Yard Classic Burger",
"price": 9
,
"desc": "How do you improve a classic? Double it. Twice as much Black Angus beef as our Classic burger with the same mouthwatering fixings. Grab a few extra napkins for this one. This burger is big.",
"img": "https://s3.amazonaws.com/backyardburgers.com/Burgers/JPGs/Screen-Shot-2016-07-05-at-3.04.40-PM.png?mtime=20160801110322",
"name": "Back Yard Double Classic Burger",
"price": 7
,
"desc": "Sauted mushrooms. Creamy Swiss. Black Angus beef. Mouth. Now. Wait, wait, wait. Before you do, top it with fresh lettuce and tomatoes. Or top it with anything else you want. It\u2019s your burger.",
"img": "https://s3.amazonaws.com/backyardburgers.com/Burgers/JPGs/mush-swiss-burger.png?mtime=20160801110114",
"name": "Mushroom Swiss Burger",
"price": 10
,
"desc": "The ace up our sleeve, dealt to your hands, no bluffing and this metaphor has gone on too long. No tricks here. Our Black Jack Burger is topped with pepper jack cheese and zesty creole mayo. Grill-blackened Angus with a kick. Your move.",
"img": "https://s3.amazonaws.com/backyardburgers.com/Burgers/JPGs/Screen-Shot-2016-07-05-at-3.00.40-PM.png?mtime=20160721140930",
"name": "Black Jack Burger",
"price": 9
,
"desc": "Sweet. Baby. Rays!, dad proclaimed after a single burger bite. The savory stack of Black Angus beef, chipotle mayo, cheddar, smoky bacon, crispy onion straws, tomato and pickles. Oh, and Sweet Baby Rays BBQ sauce. Maybe that's why he said it.",
"img": "https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/chipotle-burger.png?mtime=20160801105822",
"name": "Chipotle Burger",
"price": 8
,
"desc": "What\u2019s Black Angus beef and bleu all over? This burger. Crumbled bleu cheese and smoky bacon top this mouthwatering concoction straight from the classic black and bleu inspiration well.",
"img": "https://s3.amazonaws.com/backyardburgers.com/Burgers/JPGs/black-and-blue-burger.png?mtime=20160801110500",
"name": "Black and Bleu Burger",
"price": 6
,
"desc": "It\u2019s like someone pointed a shrink ray at one of our classic burgers, but somehow kept the classic taste. Science? Magic? Skynet! No, no. Our chefs just know how to deliver big, bold flavor in any size.",
"img": "https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/picnic-burger.png?mtime=20160801104952",
"name": "Picnic Burger",
"price": 9
]
,
"name": "Turkey & More",
"position": 2,
"id": 2,
"items": [
"desc": "Blackened chicken met creamy slaw and they fell in love. Now you can eat their love complete with perfectly ripe tomatoes. This chicken sandwich is spicy and zesty and waiting for you to order it already.",
"img": "https://s3.amazonaws.com/backyardburgers.com/Turkey-Chicken-Veggie/BYB-BlackenedChickenSandwich.jpg?mtime=20160801112514",
"name": "Blackened Chicken Sandwich",
"price": 9
,
"desc": "Blackened chicken. Pepper Jack cheese. Bacon. Creole mayo. No, we aren\u2019t bluffing. This sandwich was made for you. That is, if you\u2019re the type who likes a little kick to their chicken sandwich.",
"img": "https://s3.amazonaws.com/backyardburgers.com/Turkey-Chicken-Veggie/BYB-BlackJackChickenClub.jpg?mtime=20160721141133",
"name": "Black Jack Chicken Club",
"price": 11
,
"desc": "A chicken classic. No, not the \u201ccross the road\u201d joke dad always tells. We\u2019re talking about this seasoned, chargrilled-to-juicy-perfection Grilled Chicken Sandwich. It\u2019s so good you can tell your dad the chicken crossed the road to be a part of it.",
"img": "https://s3.amazonaws.com/backyardburgers.com/Turkey-Chicken-Veggie/BYB-GrilledChickenSandwich.jpg?mtime=20160721141131",
"name": "Grilled Chicken Sandwich",
"price": 6
,
"desc": "The only thing tender about these big and bold Chicken Tenders is, well, everything. Our juicy, tender white chicken is covered with crunchy yet fluffy breading you\u2019ll want to bite into again and again.",
"img": "https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/kids-meal-chicken.png?mtime=20160729142142",
"name": "Chicken Tenders",
"price": 10
,
"desc": "Who are you calling a turkey? Oh, our Classic Turkey Burger? Well, ok then. Top this char-grilled turkey with crisp lettuce, fresh tomato and mayo and we won\u2019t have a problem. Or put whatever you want on it, we\u2019re pretty laid back.",
"img": "https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/classic-turkey-burger.png?mtime=20160801111120",
"name": "Classic Turkey Burger",
"price": 6
,
"desc": "Charbroiled chicken breast hand-dipped in Hawaiian sauce then topped with freshly grilled pineapple, mustard and crisp lettuce. This sandwich has enough Hawaiian flavor packed in without you wearing a hula skirt to eat it, dad.",
"img": "https://s3.amazonaws.com/backyardburgers.com/Turkey-Chicken-Veggie/BYB-HawaiianChickenSandwich.jpg?mtime=20160721141131",
"name": "Hawaiian Chicken Sandwich",
"price": 10
,
"desc": "Aaaaaaaand the crowd goes wild\u2026for this burger\u2026made of turkey. Seriously. The Pepper Jack cheese. The creole mayo. The tangy mustard. It all comes together on this sandwich built to please turkey burger lovers and doubters alike.",
"img": "https://s3.amazonaws.com/backyardburgers.com/Turkey-Chicken-Veggie/BYB-WildTurkeyBurger.jpg?mtime=20160721141131",
"name": "Wild Turkey Burger",
"price": 8
,
"desc": "The best of the ballpark is now at the Back Yard. We decided to forgo the classic ketchup and mustard for something a little hotter and a whole lot meatier, and topped it off with some ooey gooey cheddar cheese. We think it\u2019s a home run.",
"img": "https://s3.amazonaws.com/backyardburgers.com/BYB-ChiliCheeseDog_BurntBun.jpg?mtime=20190325101810",
"name": "Chili Cheese Hot Dog",
"price": 5
,
"desc": "The humble, back yard legend: a juicy all-beef hot dog grilled on an open flame. Topped with ketchup, mustard, and relish.",
"img": "https://s3.amazonaws.com/backyardburgers.com/BYB_HotDog_012.jpg?mtime=20190522104045",
"name": "Back Yard Hot Dog",
"price": 11
]
,
"name": "Salads & Veggie Options",
"position": 3,
"id": 3,
"items": [
"desc": "For a place that serves so much beef, you\u2019d think we forgot about a veggie burger. You\u2019d be sadly mistaken, veggie man or veggie woman! Top yours with lettuce, tomato, red onion, pickles, mustard and/or ketchup.",
"img": "https://s3.amazonaws.com/backyardburgers.com/Turkey-Chicken-Veggie/VeggieBurger-RegularBun.jpg?mtime=20160721141034",
"name": "Veggie Burger",
"price": 10
,
"desc": "We start with a fresh lettuce base and add tomatoes, red onion, bacon, blue cheese crumbles, candied pecans, dried cranberries, and croutons. Add Grilled, Fried or Blackened Chickn. This salad is one you don\"t want to miss.",
"img": "https://s3.amazonaws.com/backyardburgers.com/Hot-Dogs-Sides/Salads/Chopped-Salad.JPG?mtime=20160721141226",
"name": "Cranberry Pecan Chicken Salad",
"price": 11
,
"desc": "Fried, Grilled or Blackened \u2014 choose your chicken and we\u2019ll lay it on a bed of fresh lettuce, sharp red onions, vine-ripened tomatoes and sliced cucumbers.",
"img": "https://s3.amazonaws.com/backyardburgers.com/Hot-Dogs-Sides/Salads/BYB-ChickenSalad.jpg?mtime=20160721141227",
"name": "Back Yard Chicken Salad",
"price": 10
,
"desc": "Dive in to fresh, crisp lettuce, sharp red onions, vine-ripened tomatoes and cool sliced cucumbers.",
"img": "https://s3.amazonaws.com/backyardburgers.com/Hot-Dogs-Sides/Salads/BYB-SideSalad.jpg?mtime=20160721141226",
"name": "Side Salad",
"price": 7
]
,
"name": "Fries & Sides",
"position": 4,
"id": 4,
"items": [
"desc": "These fries are the reason for the seasoning that we put on these fries. Crispy outside. Fluffy inside. Yes, you would like fries with that. And with that. And that.",
"img": "https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/seasoned-fries.png?mtime=20160729142140",
"name": "Seasoned Fries",
"price": 9
,
"desc": "We individually make each of these Waffle Fries in a tiny waffle maker and then\u2026ok fine you caught us. We don\u2019t have a tiny waffler. We make our Waffle Fries the old fashioned way. Hot. Crispy. Always delicious.",
"img": "https://s3.amazonaws.com/backyardburgers.com/Hot-Dogs-Sides/Sides/BYB-WaffleFries.jpg?mtime=20160721141224",
"name": "Waffle Fries",
"price": 8
,
"desc": "Potatoes, meet Meat. Meat, potatoes. Thick, beefy chili served on top of your choice of our heritage waffle fries or seasoned cut fries. Then sprinkled with a layer of golden Cheddar cheese. Grab a fork.",
"img": "https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/chili-cheese-fries.png?mtime=20160729142102",
"name": "Chili Cheese Fries",
"price": 6
,
"desc": "Order these crispy, thick-sliced golden rings as your side. Or as your meal. Why not? \u201cOnions for lunch\u201d suddenly has a nice ring to it.",
"img": "https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/onion-rings.png?mtime=20160729142140",
"name": "Onion Rings",
"price": 10
,
"desc": "It's a plain,fluffy,white baked potato,dude.You know what it is.A classic.Butter & sour cream available upon request.",
"img": "https://s3.amazonaws.com/backyardburgers.com/Plain-Potato.png?mtime=20180805214655",
"name": "Regular Baked Potato",
"price": 10
,
"desc": "A stacked spud for those who like their baked potato like we like our blind dates: loaded and VERRRRRRRY cheesy. We sprinkle sharp Cheddar, crunchy bacon and a dollop of sour cream on a fluffy, white baked potato.",
"img": "https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/loaded-baked-potato.png?mtime=20160729142141",
"name": "Loaded Baked Potato",
"price": 9
,
"desc": "Is it hot in here or is it just this cup of hearty beef chili? Oh, it's the chili. It's steaming hot in fact. But the heat really kicks in with the jalepeños. Topped with sharp Cheddar, you get all the flavor of a fall meal you can enjoy any time.",
"img": "https://s3.amazonaws.com/backyardburgers.com/Hot-Dogs-Sides/Sides/Chili.jpg?mtime=20160721141220",
"name": "Cup of Chili",
"price": 6
]
,
"name": "Shakes & Desserts",
"position": 4,
"id": 4,
"items": [
"desc": "We\u2019ve taken this classic American treat and made it even more lovable. How? By offering each flavor in a shake so thick & creamy, you\u2019ll want to skip the straw and dive right in. Available in Chocolate, Strawberry, Vanilla, Banana and Chocolate Oreo.",
"img": "https://s3.amazonaws.com/backyardburgers.com/Shakes-Desserts/Milkshake-Trio.jpg?mtime=20160721141201",
"name": "Milk Shakes",
"price": 9
,
"desc": "Underneath that flaky, buttery crust, our cobbler is loaded with fillings so good you\u2019d sell your grandma for them. Flavors vary by location \u2014 blackberry, peach, cherry, strawberry & pecan \u2014 all served fresh from the oven.",
"img": "https://s3.amazonaws.com/backyardburgers.com/Shakes-Desserts/Cobbler/BYB-Desserts-Cobbler-Peach.jpg?mtime=20160721141208",
"name": "Fresh-Baked Cobbler",
"price": 8
,
"desc": "We\u2019ll crumble a bunch of Oreos and put them in a milkshake for you because we want you to enjoy life as much as possible. Grab one of our thick straws and enjoy.",
"img": "https://s3.amazonaws.com/backyardburgers.com/LTO Items/Sides/BYB-OreoShakewCherry.jpg?mtime=20170828143213",
"name": "Oreo Milkshake",
"price": 9
]
,
"name": "Kids Menu",
"position": 4,
"id": 4,
"items": [
"desc": "Light and crispy chicken tenders.",
"img": "https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/kids-meal-chicken.png?mtime=20160729142142",
"name": "Crispy Tenders",
"price": 5
,
"desc": "Our Kid's Burger is made with 100 % Black Angus Beef and topped with ketchup,mustard and pickle.",
"img": "https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/kids-meal-burger.png?mtime=20160729142143",
"name": "Kid's Burger ",
"price": 11
,
"desc": "This 100% Black Angus Beef Dog is topped with ketchup and mustard.",
"img": "https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/kids-meal-hot-dog.png?mtime=20160729142142",
"name": "Back Yard Dog",
"price": 7
]
]
]
我的功能：
computed:
menu()
// console.log(store.state.menu)
return m.filter((doc) =>
try
return doc
.items
.some
.name
.toLowerCase().match(this.search.toLowerCase())
catch (err)
console.log(err)
)
`
提前致谢
【问题讨论】：
请比“它没有正确过滤它”更具体。m 不是一个对象而不是一个列表吗？你的意思是m.menu.filter？
一旦输入字段被更新，它就不会正确过滤它，它会过滤到任何内容。它是一个我可以按类别但不能按项目名称过滤的对象。
这个问题可以做更多的焦点。这是我最好的猜测：您是否要返回与您的搜索词匹配的项目的所有类别，仅包括那些项目？或者，您可能只想返回项目，而不管它们属于什么类别。或者，如果其中任何项目匹配，您可能只想返回整个类别及其所有项目。你想要什么？如果你有一个简单的 JS 函数可以将它过滤成你请求的格式，你需要帮助在 Vue 中呈现它，还是已经处理了？
【参考方案1】：
此答案仅涵盖数据过滤，从您的类别和搜索词开始，并仅返回那些具有与该词匹配的项目的类别，并且仅返回每个类别中与该词实际匹配的项目。
这让 Vue 处理其他代码，但我还是建议这样做。
const filterCategories = (categories, searchTerm) =>
categories .map ((items, ...rest) => (
...rest,
items: items .filter ((desc) => desc .toLowerCase () .match (searchTerm .toLowerCase ()))
))
.filter ((items) => items .length > 0)
const categories = [name: "Black Angus Burgers", position: 1, id: 1, items: [desc: 'Bring home the bacon, but make sure that bacon is hickory smoked and on top of cheddar and 1/3 lb. of chargrilled Black Angus beef. This burger"s name explains itself. Of course, you can also top it with crisp lettuce, tomatoes and anything else.', img: "https: //s3.amazonaws.com/backyardburgers.com/Burgers/updated/bacon-cheddar-burger.png?mtime=20160801105417", name: "1/3 lb Bacon Cheddar Burger", price: 11, desc: "A classic burger just like dad used to make. That is, if your dad was a crowd-pleasing grillmaster who used Black Angus beef topped with garden-fresh lettuce, lush tomatoes and crunchy dill pickles. Apologies to dads everywhere.", img: "https: //s3.amazonaws.com/backyardburgers.com/Burgers/updated/classic-burger.png?mtime=20160801105924", name: "Back Yard Classic Burger", price: 9, desc: "How do you improve a classic? Double it. Twice as much Black Angus beef as our Classic burger with the same mouthwatering fixings. Grab a few extra napkins for this one. This burger is big.", img: "https: //s3.amazonaws.com/backyardburgers.com/Burgers/JPGs/Screen-Shot-2016-07-05-at-3.04.40-PM.png?mtime=20160801110322", name: "Back Yard Double Classic Burger", price: 7, desc: "Sauted mushrooms. Creamy Swiss. Black Angus beef. Mouth. Now. Wait, wait, wait. Before you do, top it with fresh lettuce and tomatoes. Or top it with anything else you want. It’s your burger.", img: "https: //s3.amazonaws.com/backyardburgers.com/Burgers/JPGs/mush-swiss-burger.png?mtime=20160801110114", name: "Mushroom Swiss Burger", price: 10, desc: "The ace up our sleeve, dealt to your hands, no bluffing and this metaphor has gone on too long. No tricks here. Our Black Jack Burger is topped with pepper jack cheese and zesty creole mayo. Grill-blackened Angus with a kick. Your move.", img: "https: //s3.amazonaws.com/backyardburgers.com/Burgers/JPGs/Screen-Shot-2016-07-05-at-3.00.40-PM.png?mtime=20160721140930", name: "Black Jack Burger", price: 9, desc: "Sweet. Baby. Rays!, dad proclaimed after a single burger bite. The savory stack of Black Angus beef, chipotle mayo, cheddar, smoky bacon, crispy onion straws, tomato and pickles. Oh, and Sweet Baby Rays BBQ sauce. Maybe that's why he said it.", img: "https: //s3.amazonaws.com/backyardburgers.com/Burgers/updated/chipotle-burger.png?mtime=20160801105822", name: "Chipotle Burger", price: 8, desc: "What’s Black Angus beef and bleu all over? This burger. Crumbled bleu cheese and smoky bacon top this mouthwatering concoction straight from the classic black and bleu inspiration well.", img: "https: //s3.amazonaws.com/backyardburgers.com/Burgers/JPGs/black-and-blue-burger.png?mtime=20160801110500", name: "Black and Bleu Burger", price: 6, desc: "It’s like someone pointed a shrink ray at one of our classic burgers, but somehow kept the classic taste. Science? Magic? Skynet! No, no. Our chefs just know how to deliver big, bold flavor in any size.", img: "https: //s3.amazonaws.com/backyardburgers.com/Burgers/updated/picnic-burger.png?mtime=20160801104952", name: "Picnic Burger", price: 9], name: "Turkey & More", position: 2, id: 2, items: [desc: "Blackened chicken met creamy slaw and they fell in love. Now you can eat their love complete with perfectly ripe tomatoes. This chicken sandwich is spicy and zesty and waiting for you to order it already.", img: "https: //s3.amazonaws.com/backyardburgers.com/Turkey-Chicken-Veggie/BYB-BlackenedChickenSandwich.jpg?mtime=20160801112514", name: "Blackened Chicken Sandwich", price: 9, desc: "Blackened chicken. Pepper Jack cheese. Bacon. Creole mayo. No, we aren’t bluffing. This sandwich was made for you. That is, if you’re the type who likes a little kick to their chicken sandwich.", img: "https: //s3.amazonaws.com/backyardburgers.com/Turkey-Chicken-Veggie/BYB-BlackJackChickenClub.jpg?mtime=20160721141133", name: "Black Jack Chicken Club", price: 11, desc: "A chicken classic. No, not the “cross the road” joke dad always tells. We’re talking about this seasoned, chargrilled-to-juicy-perfection Grilled Chicken Sandwich. It’s so good you can tell your dad the chicken crossed the road to be a part of it.", img: "https: //s3.amazonaws.com/backyardburgers.com/Turkey-Chicken-Veggie/BYB-GrilledChickenSandwich.jpg?mtime=20160721141131", name: "Grilled Chicken Sandwich", price: 6, desc: "The only thing tender about these big and bold Chicken Tenders is, well, everything. Our juicy, tender white chicken is covered with crunchy yet fluffy breading you’ll want to bite into again and again.", img: "https: //s3.amazonaws.com/backyardburgers.com/Burgers/updated/kids-meal-chicken.png?mtime=20160729142142", name: "Chicken Tenders", price: 10, desc: "Who are you calling a turkey? Oh, our Classic Turkey Burger? Well, ok then. Top this char-grilled turkey with crisp lettuce, fresh tomato and mayo and we won’t have a problem. Or put whatever you want on it, we’re pretty laid back.", img: "https: //s3.amazonaws.com/backyardburgers.com/Burgers/updated/classic-turkey-burger.png?mtime=20160801111120", name: "Classic Turkey Burger", price: 6, desc: "Charbroiled chicken breast hand-dipped in Hawaiian sauce then topped with freshly grilled pineapple, mustard and crisp lettuce. This sandwich has enough Hawaiian flavor packed in without you wearing a hula skirt to eat it, dad.", img: "https: //s3.amazonaws.com/backyardburgers.com/Turkey-Chicken-Veggie/BYB-HawaiianChickenSandwich.jpg?mtime=20160721141131", name: "Hawaiian Chicken Sandwich", price: 10, desc: "Aaaaaaaand the crowd goes wild…for this burger…made of turkey. Seriously. The Pepper Jack cheese. The creole mayo. The tangy mustard. It all comes together on this sandwich built to please turkey burger lovers and doubters alike.", img: "https: //s3.amazonaws.com/backyardburgers.com/Turkey-Chicken-Veggie/BYB-WildTurkeyBurger.jpg?mtime=20160721141131", name: "Wild Turkey Burger", price: 8, desc: "The best of the ballpark is now at the Back Yard. We decided to forgo the classic ketchup and mustard for something a little hotter and a whole lot meatier, and topped it off with some ooey gooey cheddar cheese. We think it’s a home run.", img: "https: //s3.amazonaws.com/backyardburgers.com/BYB-ChiliCheeseDog_BurntBun.jpg?mtime=20190325101810", name: "Chili Cheese Hot Dog", price: 5, desc: "The humble, back yard legend: a juicy all-beef hot dog grilled on an open flame. Topped with ketchup, mustard, and relish.", img: "https: //s3.amazonaws.com/backyardburgers.com/BYB_HotDog_012.jpg?mtime=20190522104045", name: "Back Yard Hot Dog", price: 11], name: "Salads & Veggie Options", position: 3, id: 3, items: [desc: "For a place that serves so much beef, you’d think we forgot about a veggie burger. You’d be sadly mistaken, veggie man or veggie woman! Top yours with lettuce, tomato, red onion, pickles, mustard and/or ketchup.", img: "https: //s3.amazonaws.com/backyardburgers.com/Turkey-Chicken-Veggie/VeggieBurger-RegularBun.jpg?mtime=20160721141034", name: "Veggie Burger", price: 10, desc: 'We start with a fresh lettuce base and add tomatoes, red onion, bacon, blue cheese crumbles, candied pecans, dried cranberries, and croutons. Add Grilled, Fried or Blackened Chickn. This salad is one you don"t want to miss.', img: "https: //s3.amazonaws.com/backyardburgers.com/Hot-Dogs-Sides/Salads/Chopped-Salad.JPG?mtime=20160721141226", name: "Cranberry Pecan Chicken Salad", price: 11, desc: "Fried, Grilled or Blackened — choose your chicken and we’ll lay it on a bed of fresh lettuce, sharp red onions, vine-ripened tomatoes and sliced cucumbers.", img: "https: //s3.amazonaws.com/backyardburgers.com/Hot-Dogs-Sides/Salads/BYB-ChickenSalad.jpg?mtime=20160721141227", name: "Back Yard Chicken Salad", price: 10, desc: "Dive in to fresh, crisp lettuce, sharp red onions, vine-ripened tomatoes and cool sliced cucumbers.", img: "https: //s3.amazonaws.com/backyardburgers.com/Hot-Dogs-Sides/Salads/BYB-SideSalad.jpg?mtime=20160721141226", name: "Side Salad", price: 7], name: "Fries & Sides", position: 4, id: 4, items: [desc: "These fries are the reason for the seasoning that we put on these fries. Crispy outside. Fluffy inside. Yes, you would like fries with that. And with that. And that.", img: "https: //s3.amazonaws.com/backyardburgers.com/Burgers/updated/seasoned-fries.png?mtime=20160729142140", name: "Seasoned Fries", price: 9, desc: "We individually make each of these Waffle Fries in a tiny waffle maker and then…ok fine you caught us. We don’t have a tiny waffler. We make our Waffle Fries the old fashioned way. Hot. Crispy. Always delicious.", img: "https: //s3.amazonaws.com/backyardburgers.com/Hot-Dogs-Sides/Sides/BYB-WaffleFries.jpg?mtime=20160721141224", name: "Waffle Fries", price: 8, desc: "Potatoes, meet Meat. Meat, potatoes. Thick, beefy chili served on top of your choice of our heritage waffle fries or seasoned cut fries. Then sprinkled with a layer of golden Cheddar cheese. Grab a fork.", img: "https: //s3.amazonaws.com/backyardburgers.com/Burgers/updated/chili-cheese-fries.png?mtime=20160729142102", name: "Chili Cheese Fries", price: 6, desc: "Order these crispy, thick-sliced golden rings as your side. Or as your meal. Why not? “Onions for lunch” suddenly has a nice ring to it.", img: "https: //s3.amazonaws.com/backyardburgers.com/Burgers/updated/onion-rings.png?mtime=20160729142140", name: "Onion Rings", price: 10, desc: "It's a plain, fluffy, white baked potato, dude.You know what it is.A classic.Butter & sour cream available upon request.", img: "https: //s3.amazonaws.com/backyardburgers.com/Plain-Potato.png?mtime=20180805214655", name: "Regular Baked Potato", price: 10, desc: "A stacked spud for those who like their baked potato like we like our blind dates: loaded and VERRRRRRRY cheesy. We sprinkle sharp Cheddar, crunchy bacon and a dollop of sour cream on a fluffy, white baked potato.", img: "https: //s3.amazonaws.com/backyardburgers.com/Burgers/updated/loaded-baked-potato.png?mtime=20160729142141", name: "Loaded Baked Potato", price: 9, desc: "Is it hot in here or is it just this cup of hearty beef chili? Oh, it's the chili. It's steaming hot in fact. But the heat really kicks in with the jalepeños. Topped with sharp Cheddar, you get all the flavor of a fall meal you can enjoy any time.", img: "https: //s3.amazonaws.com/backyardburgers.com/Hot-Dogs-Sides/Sides/Chili.jpg?mtime=20160721141220", name: "Cup of Chili", price: 6], name: "Shakes & Desserts", position: 4, id: 4, items: [desc: "We’ve taken this classic American treat and made it even more lovable. How? By offering each flavor in a shake so thick & creamy, you’ll want to skip the straw and dive right in. Available in Chocolate, Strawberry, Vanilla, Banana and Chocolate Oreo.", img: "https: //s3.amazonaws.com/backyardburgers.com/Shakes-Desserts/Milkshake-Trio.jpg?mtime=20160721141201", name: "Milk Shakes", price: 9, desc: "Underneath that flaky, buttery crust, our cobbler is loaded with fillings so good you’d sell your grandma for them. Flavors vary by location — blackberry, peach, cherry, strawberry & pecan — all served fresh from the oven.", img: "https: //s3.amazonaws.com/backyardburgers.com/Shakes-Desserts/Cobbler/BYB-Desserts-Cobbler-Peach.jpg?mtime=20160721141208", name: "Fresh-Baked Cobbler", price: 8, desc: "We’ll crumble a bunch of Oreos and put them in a milkshake for you because we want you to enjoy life as much as possible. Grab one of our thick straws and enjoy.", img: "https: //s3.amazonaws.com/backyardburgers.com/LTO Items/Sides/BYB-OreoShakewCherry.jpg?mtime=20170828143213", name: "Oreo Milkshake", price: 9], name: "Kids Menu", position: 4, id: 4, items: [desc: "Light and crispy chicken tenders.", img: "https: //s3.amazonaws.com/backyardburgers.com/Burgers/updated/kids-meal-chicken.png?mtime=20160729142142", name: "Crispy Tenders", price: 5, desc: "Our Kid's Burger is made with 100 % Black Angus Beef and topped with ketchup, mustard and pickle.", img: "https: //s3.amazonaws.com/backyardburgers.com/Burgers/updated/kids-meal-burger.png?mtime=20160729142143", name: "Kid's Burger ", price: 11, desc: "This 100% Black Angus Beef Dog is topped with ketchup and mustard.", img: "https: //s3.amazonaws.com/backyardburgers.com/Burgers/updated/kids-meal-hot-dog.png?mtime=20160729142142", name: "Back Yard Dog", price: 7]];
console .log ('*** With `tender` ***')
console .log (filterCategories (categories, 'tender'))
console .log ('*** With `mustard` ***')
console .log (filterCategories (categories, 'mustard')).as-console-wrapper min-height: 100% !important; top: 0【讨论】：
【参考方案2】：试试下面的代码 sn-p:
更新
Vue 实现：
const menu =
menu: [
categories: [
name: "Black Angus Burgers",
position: 1,
id: 1,
items: [
desc:
'Bring home the bacon, but make sure that bacon is hickory smoked and on top of cheddar and 1/3 lb. of chargrilled Black Angus beef. This burger"s name explains itself. Of course, you can also top it with crisp lettuce, tomatoes and anything else.',
img:
"https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/bacon-cheddar-burger.png?mtime=20160801105417",
name: "1/3 lb Bacon Cheddar Burger",
price: 11
,
desc:
"A classic burger just like dad used to make. That is, if your dad was a crowd-pleasing grillmaster who used Black Angus beef topped with garden-fresh lettuce, lush tomatoes and crunchy dill pickles. Apologies to dads everywhere.",
img:
"https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/classic-burger.png?mtime=20160801105924",
name: "Back Yard Classic Burger",
price: 9
,
desc:
"How do you improve a classic? Double it. Twice as much Black Angus beef as our Classic burger with the same mouthwatering fixings. Grab a few extra napkins for this one. This burger is big.",
img:
"https://s3.amazonaws.com/backyardburgers.com/Burgers/JPGs/Screen-Shot-2016-07-05-at-3.04.40-PM.png?mtime=20160801110322",
name: "Back Yard Double Classic Burger",
price: 7
,
desc:
"Sauted mushrooms. Creamy Swiss. Black Angus beef. Mouth. Now. Wait, wait, wait. Before you do, top it with fresh lettuce and tomatoes. Or top it with anything else you want. It\u2019s your burger.",
img:
"https://s3.amazonaws.com/backyardburgers.com/Burgers/JPGs/mush-swiss-burger.png?mtime=20160801110114",
name: "Mushroom Swiss Burger",
price: 10
,
desc:
"The ace up our sleeve, dealt to your hands, no bluffing and this metaphor has gone on too long. No tricks here. Our Black Jack Burger is topped with pepper jack cheese and zesty creole mayo. Grill-blackened Angus with a kick. Your move.",
img:
"https://s3.amazonaws.com/backyardburgers.com/Burgers/JPGs/Screen-Shot-2016-07-05-at-3.00.40-PM.png?mtime=20160721140930",
name: "Black Jack Burger",
price: 9
,
desc:
"Sweet. Baby. Rays!, dad proclaimed after a single burger bite. The savory stack of Black Angus beef, chipotle mayo, cheddar, smoky bacon, crispy onion straws, tomato and pickles. Oh, and Sweet Baby Rays BBQ sauce. Maybe that's why he said it.",
img:
"https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/chipotle-burger.png?mtime=20160801105822",
name: "Chipotle Burger",
price: 8
,
desc:
"What\u2019s Black Angus beef and bleu all over? This burger. Crumbled bleu cheese and smoky bacon top this mouthwatering concoction straight from the classic black and bleu inspiration well.",
img:
"https://s3.amazonaws.com/backyardburgers.com/Burgers/JPGs/black-and-blue-burger.png?mtime=20160801110500",
name: "Black and Bleu Burger",
price: 6
,
desc:
"It\u2019s like someone pointed a shrink ray at one of our classic burgers, but somehow kept the classic taste. Science? Magic? Skynet! No, no. Our chefs just know how to deliver big, bold flavor in any size.",
img:
"https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/picnic-burger.png?mtime=20160801104952",
name: "Picnic Burger",
price: 9
]
,
name: "Turkey & More",
position: 2,
id: 2,
items: [
desc:
"Blackened chicken met creamy slaw and they fell in love. Now you can eat their love complete with perfectly ripe tomatoes. This chicken sandwich is spicy and zesty and waiting for you to order it already.",
img:
"https://s3.amazonaws.com/backyardburgers.com/Turkey-Chicken-Veggie/BYB-BlackenedChickenSandwich.jpg?mtime=20160801112514",
name: "Blackened Chicken Sandwich",
price: 9
,
desc:
"Blackened chicken. Pepper Jack cheese. Bacon. Creole mayo. No, we aren\u2019t bluffing. This sandwich was made for you. That is, if you\u2019re the type who likes a little kick to their chicken sandwich.",
img:
"https://s3.amazonaws.com/backyardburgers.com/Turkey-Chicken-Veggie/BYB-BlackJackChickenClub.jpg?mtime=20160721141133",
name: "Black Jack Chicken Club",
price: 11
,
desc:
"A chicken classic. No, not the \u201ccross the road\u201d joke dad always tells. We\u2019re talking about this seasoned, chargrilled-to-juicy-perfection Grilled Chicken Sandwich. It\u2019s so good you can tell your dad the chicken crossed the road to be a part of it.",
img:
"https://s3.amazonaws.com/backyardburgers.com/Turkey-Chicken-Veggie/BYB-GrilledChickenSandwich.jpg?mtime=20160721141131",
name: "Grilled Chicken Sandwich",
price: 6
,
desc:
"The only thing tender about these big and bold Chicken Tenders is, well, everything. Our juicy, tender white chicken is covered with crunchy yet fluffy breading you\u2019ll want to bite into again and again.",
img:
"https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/kids-meal-chicken.png?mtime=20160729142142",
name: "Chicken Tenders",
price: 10
,
desc:
"Who are you calling a turkey? Oh, our Classic Turkey Burger? Well, ok then. Top this char-grilled turkey with crisp lettuce, fresh tomato and mayo and we won\u2019t have a problem. Or put whatever you want on it, we\u2019re pretty laid back.",
img:
"https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/classic-turkey-burger.png?mtime=20160801111120",
name: "Classic Turkey Burger",
price: 6
,
desc:
"Charbroiled chicken breast hand-dipped in Hawaiian sauce then topped with freshly grilled pineapple, mustard and crisp lettuce. This sandwich has enough Hawaiian flavor packed in without you wearing a hula skirt to eat it, dad.",
img:
"https://s3.amazonaws.com/backyardburgers.com/Turkey-Chicken-Veggie/BYB-HawaiianChickenSandwich.jpg?mtime=20160721141131",
name: "Hawaiian Chicken Sandwich",
price: 10
,
desc:
"Aaaaaaaand the crowd goes wild\u2026for this burger\u2026made of turkey. Seriously. The Pepper Jack cheese. The creole mayo. The tangy mustard. It all comes together on this sandwich built to please turkey burger lovers and doubters alike.",
img:
"https://s3.amazonaws.com/backyardburgers.com/Turkey-Chicken-Veggie/BYB-WildTurkeyBurger.jpg?mtime=20160721141131",
name: "Wild Turkey Burger",
price: 8
,
desc:
"The best of the ballpark is now at the Back Yard. We decided to forgo the classic ketchup and mustard for something a little hotter and a whole lot meatier, and topped it off with some ooey gooey cheddar cheese. We think it\u2019s a home run.",
img:
"https://s3.amazonaws.com/backyardburgers.com/BYB-ChiliCheeseDog_BurntBun.jpg?mtime=20190325101810",
name: "Chili Cheese Hot Dog",
price: 5
,
desc:
"The humble, back yard legend: a juicy all-beef hot dog grilled on an open flame. Topped with ketchup, mustard, and relish.",
img:
"https://s3.amazonaws.com/backyardburgers.com/BYB_HotDog_012.jpg?mtime=20190522104045",
name: "Back Yard Hot Dog",
price: 11
]
,
name: "Salads & Veggie Options",
position: 3,
id: 3,
items: [
desc:
"For a place that serves so much beef, you\u2019d think we forgot about a veggie burger. You\u2019d be sadly mistaken, veggie man or veggie woman! Top yours with lettuce, tomato, red onion, pickles, mustard and/or ketchup.",
img:
"https://s3.amazonaws.com/backyardburgers.com/Turkey-Chicken-Veggie/VeggieBurger-RegularBun.jpg?mtime=20160721141034",
name: "Veggie Burger",
price: 10
,
desc:
'We start with a fresh lettuce base and add tomatoes, red onion, bacon, blue cheese crumbles, candied pecans, dried cranberries, and croutons. Add Grilled, Fried or Blackened Chickn. This salad is one you don"t want to miss.',
img:
"https://s3.amazonaws.com/backyardburgers.com/Hot-Dogs-Sides/Salads/Chopped-Salad.JPG?mtime=20160721141226",
name: "Cranberry Pecan Chicken Salad",
price: 11
,
desc:
"Fried, Grilled or Blackened \u2014 choose your chicken and we\u2019ll lay it on a bed of fresh lettuce, sharp red onions, vine-ripened tomatoes and sliced cucumbers.",
img:
"https://s3.amazonaws.com/backyardburgers.com/Hot-Dogs-Sides/Salads/BYB-ChickenSalad.jpg?mtime=20160721141227",
name: "Back Yard Chicken Salad",
price: 10
,
desc:
"Dive in to fresh, crisp lettuce, sharp red onions, vine-ripened tomatoes and cool sliced cucumbers.",
img:
"https://s3.amazonaws.com/backyardburgers.com/Hot-Dogs-Sides/Salads/BYB-SideSalad.jpg?mtime=20160721141226",
name: "Side Salad",
price: 7
]
,
name: "Fries & Sides",
position: 4,
id: 4,
items: [
desc:
"These fries are the reason for the seasoning that we put on these fries. Crispy outside. Fluffy inside. Yes, you would like fries with that. And with that. And that.",
img:
"https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/seasoned-fries.png?mtime=20160729142140",
name: "Seasoned Fries",
price: 9
,
desc:
"We individually make each of these Waffle Fries in a tiny waffle maker and then\u2026ok fine you caught us. We don\u2019t have a tiny waffler. We make our Waffle Fries the old fashioned way. Hot. Crispy. Always delicious.",
img:
"https://s3.amazonaws.com/backyardburgers.com/Hot-Dogs-Sides/Sides/BYB-WaffleFries.jpg?mtime=20160721141224",
name: "Waffle Fries",
price: 8
,
desc:
"Potatoes, meet Meat. Meat, potatoes. Thick, beefy chili served on top of your choice of our heritage waffle fries or seasoned cut fries. Then sprinkled with a layer of golden Cheddar cheese. Grab a fork.",
img:
"https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/chili-cheese-fries.png?mtime=20160729142102",
name: "Chili Cheese Fries",
price: 6
,
desc:
"Order these crispy, thick-sliced golden rings as your side. Or as your meal. Why not? \u201cOnions for lunch\u201d suddenly has a nice ring to it.",
img:
"https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/onion-rings.png?mtime=20160729142140",
name: "Onion Rings",
price: 10
,
desc:
"It's a plain,fluffy,white baked potato,dude.You know what it is.A classic.Butter & sour cream available upon request.",
img:
"https://s3.amazonaws.com/backyardburgers.com/Plain-Potato.png?mtime=20180805214655",
name: "Regular Baked Potato",
price: 10
,
desc:
"A stacked spud for those who like their baked potato like we like our blind dates: loaded and VERRRRRRRY cheesy. We sprinkle sharp Cheddar, crunchy bacon and a dollop of sour cream on a fluffy, white baked potato.",
img:
"https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/loaded-baked-potato.png?mtime=20160729142141",
name: "Loaded Baked Potato",
price: 9
,
desc:
"Is it hot in here or is it just this cup of hearty beef chili? Oh, it's the chili. It's steaming hot in fact. But the heat really kicks in with the jalepeños. Topped with sharp Cheddar, you get all the flavor of a fall meal you can enjoy any time.",
img:
"https://s3.amazonaws.com/backyardburgers.com/Hot-Dogs-Sides/Sides/Chili.jpg?mtime=20160721141220",
name: "Cup of Chili",
price: 6
]
,
name: "Shakes & Desserts",
position: 4,
id: 4,
items: [
desc:
"We\u2019ve taken this classic American treat and made it even more lovable. How? By offering each flavor in a shake so thick & creamy, you\u2019ll want to skip the straw and dive right in. Available in Chocolate, Strawberry, Vanilla, Banana and Chocolate Oreo.",
img:
"https://s3.amazonaws.com/backyardburgers.com/Shakes-Desserts/Milkshake-Trio.jpg?mtime=20160721141201",
name: "Milk Shakes",
price: 9
,
desc:
"Underneath that flaky, buttery crust, our cobbler is loaded with fillings so good you\u2019d sell your grandma for them. Flavors vary by location \u2014 blackberry, peach, cherry, strawberry & pecan \u2014 all served fresh from the oven.",
img:
"https://s3.amazonaws.com/backyardburgers.com/Shakes-Desserts/Cobbler/BYB-Desserts-Cobbler-Peach.jpg?mtime=20160721141208",
name: "Fresh-Baked Cobbler",
price: 8
,
desc:
"We\u2019ll crumble a bunch of Oreos and put them in a milkshake for you because we want you to enjoy life as much as possible. Grab one of our thick straws and enjoy.",
img:
"https://s3.amazonaws.com/backyardburgers.com/LTO Items/Sides/BYB-OreoShakewCherry.jpg?mtime=20170828143213",
name: "Oreo Milkshake",
price: 9
]
,
name: "Kids Menu",
position: 4,
id: 4,
items: [
desc: "Light and crispy chicken tenders.",
img:
"https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/kids-meal-chicken.png?mtime=20160729142142",
name: "Crispy Tenders",
price: 5
,
desc:
"Our Kid's Burger is made with 100 % Black Angus Beef and topped with ketchup,mustard and pickle.",
img:
"https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/kids-meal-burger.png?mtime=20160729142143",
name: "Kid's Burger ",
price: 11
,
desc:
"This 100% Black Angus Beef Dog is topped with ketchup and mustard.",
img:
"https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/kids-meal-hot-dog.png?mtime=20160729142142",
name: "Back Yard Dog",
price: 7
]
]
]
;
var app = new Vue(
el: "#app",
data:
menu,
search: ""
,
computed:
appMenu()
if (this.search.trim().length)
return this.menu.menu[0].categories.map(doc =>
const items = doc.items.filter(item =>
return item.name.match(new RegExp(`$this.search`, 'i'));
);
return ...doc, items ;
).filter(( items ) => items.length > 0);
else
return this.menu.menu[0].categories;
);<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="col-3 mb--20">
<div class="input-group-over pl--10 round">
<input v-model="search" type="text" class="form-control form-control-sm iqs-input" data-container=".iqs-container" value="" placeholder="Search">
<span class="fi fi-search btn btn-sm pl--12 pr--12 text-gray-500"></span>
</div>
</div>
<div v-for='(cat, index) in appMenu' :key="index">
<h5 class="text-left m-4"><b>cat.name</b></h5>
<div class="row">
<div v-for='(item, index2) in cat["items"]' :key="index2" class="col-lg-6 col-md-12 mt-2">
<div class="col-12 border pointer">
<div class="p-2">
<div class="d-flex justify-content-end">
<span class="mr-auto"><b>item.name</b></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>【讨论】：
这可行，但会操纵 dom 并破坏其他东西。我目前正在使用 vuejs 感谢这与一些调整一起工作，我已将所有内容保存到 vuex 状态，但我只需要调整映射，再次感谢它工作 @AlexisFortuño 很高兴你成功了。如果此（或任何其他）答案帮助您解决了问题，请将其标记为已接受，因为它将帮助将来遇到与您类似的问题的人。请阅读What should I do when someone answers my question?。【参考方案3】：我想这就是你想要的。如果没有，它可能已经足够接近您的需求了。
const theMenu =
menu: [
categories: [
name: "Black Angus Burgers",
position: 1,
id: 1,
items: [
desc:
'Bring home the bacon, but make sure that bacon is hickory smoked and on top of cheddar and 1/3 lb. of chargrilled Black Angus beef. This burger"s name explains itself. Of course, you can also top it with crisp lettuce, tomatoes and anything else.',
img:
"https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/bacon-cheddar-burger.png?mtime=20160801105417",
name: "1/3 lb Bacon Cheddar Burger",
price: 11
,
desc:
"A classic burger just like dad used to make. That is, if your dad was a crowd-pleasing grillmaster who used Black Angus beef topped with garden-fresh lettuce, lush tomatoes and crunchy dill pickles. Apologies to dads everywhere.",
img:
"https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/classic-burger.png?mtime=20160801105924",
name: "Back Yard Classic Burger",
price: 9
,
desc:
"How do you improve a classic? Double it. Twice as much Black Angus beef as our Classic burger with the same mouthwatering fixings. Grab a few extra napkins for this one. This burger is big.",
img:
"https://s3.amazonaws.com/backyardburgers.com/Burgers/JPGs/Screen-Shot-2016-07-05-at-3.04.40-PM.png?mtime=20160801110322",
name: "Back Yard Double Classic Burger",
price: 7
,
desc:
"Sauted mushrooms. Creamy Swiss. Black Angus beef. Mouth. Now. Wait, wait, wait. Before you do, top it with fresh lettuce and tomatoes. Or top it with anything else you want. It\u2019s your burger.",
img:
"https://s3.amazonaws.com/backyardburgers.com/Burgers/JPGs/mush-swiss-burger.png?mtime=20160801110114",
name: "Mushroom Swiss Burger",
price: 10
,
desc:
"The ace up our sleeve, dealt to your hands, no bluffing and this metaphor has gone on too long. No tricks here. Our Black Jack Burger is topped with pepper jack cheese and zesty creole mayo. Grill-blackened Angus with a kick. Your move.",
img:
"https://s3.amazonaws.com/backyardburgers.com/Burgers/JPGs/Screen-Shot-2016-07-05-at-3.00.40-PM.png?mtime=20160721140930",
name: "Black Jack Burger",
price: 9
,
desc:
"Sweet. Baby. Rays!, dad proclaimed after a single burger bite. The savory stack of Black Angus beef, chipotle mayo, cheddar, smoky bacon, crispy onion straws, tomato and pickles. Oh, and Sweet Baby Rays BBQ sauce. Maybe that's why he said it.",
img:
"https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/chipotle-burger.png?mtime=20160801105822",
name: "Chipotle Burger",
price: 8
,
desc:
"What\u2019s Black Angus beef and bleu all over? This burger. Crumbled bleu cheese and smoky bacon top this mouthwatering concoction straight from the classic black and bleu inspiration well.",
img:
"https://s3.amazonaws.com/backyardburgers.com/Burgers/JPGs/black-and-blue-burger.png?mtime=20160801110500",
name: "Black and Bleu Burger",
price: 6
,
desc:
"It\u2019s like someone pointed a shrink ray at one of our classic burgers, but somehow kept the classic taste. Science? Magic? Skynet! No, no. Our chefs just know how to deliver big, bold flavor in any size.",
img:
"https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/picnic-burger.png?mtime=20160801104952",
name: "Picnic Burger",
price: 9
]
,
name: "Turkey & More",
position: 2,
id: 2,
items: [
desc:
"Blackened chicken met creamy slaw and they fell in love. Now you can eat their love complete with perfectly ripe tomatoes. This chicken sandwich is spicy and zesty and waiting for you to order it already.",
img:
"https://s3.amazonaws.com/backyardburgers.com/Turkey-Chicken-Veggie/BYB-BlackenedChickenSandwich.jpg?mtime=20160801112514",
name: "Blackened Chicken Sandwich",
price: 9
,
desc:
"Blackened chicken. Pepper Jack cheese. Bacon. Creole mayo. No, we aren\u2019t bluffing. This sandwich was made for you. That is, if you\u2019re the type who likes a little kick to their chicken sandwich.",
img:
"https://s3.amazonaws.com/backyardburgers.com/Turkey-Chicken-Veggie/BYB-BlackJackChickenClub.jpg?mtime=20160721141133",
name: "Black Jack Chicken Club",
price: 11
,
desc:
"A chicken classic. No, not the \u201ccross the road\u201d joke dad always tells. We\u2019re talking about this seasoned, chargrilled-to-juicy-perfection Grilled Chicken Sandwich. It\u2019s so good you can tell your dad the chicken crossed the road to be a part of it.",
img:
"https://s3.amazonaws.com/backyardburgers.com/Turkey-Chicken-Veggie/BYB-GrilledChickenSandwich.jpg?mtime=20160721141131",
name: "Grilled Chicken Sandwich",
price: 6
,
desc:
"The only thing tender about these big and bold Chicken Tenders is, well, everything. Our juicy, tender white chicken is covered with crunchy yet fluffy breading you\u2019ll want to bite into again and again.",
img:
"https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/kids-meal-chicken.png?mtime=20160729142142",
name: "Chicken Tenders",
price: 10
,
desc:
"Who are you calling a turkey? Oh, our Classic Turkey Burger? Well, ok then. Top this char-grilled turkey with crisp lettuce, fresh tomato and mayo and we won\u2019t have a problem. Or put whatever you want on it, we\u2019re pretty laid back.",
img:
"https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/classic-turkey-burger.png?mtime=20160801111120",
name: "Classic Turkey Burger",
price: 6
,
desc:
"Charbroiled chicken breast hand-dipped in Hawaiian sauce then topped with freshly grilled pineapple, mustard and crisp lettuce. This sandwich has enough Hawaiian flavor packed in without you wearing a hula skirt to eat it, dad.",
img:
"https://s3.amazonaws.com/backyardburgers.com/Turkey-Chicken-Veggie/BYB-HawaiianChickenSandwich.jpg?mtime=20160721141131",
name: "Hawaiian Chicken Sandwich",
price: 10
,
desc:
"Aaaaaaaand the crowd goes wild\u2026for this burger\u2026made of turkey. Seriously. The Pepper Jack cheese. The creole mayo. The tangy mustard. It all comes together on this sandwich built to please turkey burger lovers and doubters alike.",
img:
"https://s3.amazonaws.com/backyardburgers.com/Turkey-Chicken-Veggie/BYB-WildTurkeyBurger.jpg?mtime=20160721141131",
name: "Wild Turkey Burger",
price: 8
,
desc:
"The best of the ballpark is now at the Back Yard. We decided to forgo the classic ketchup and mustard for something a little hotter and a whole lot meatier, and topped it off with some ooey gooey cheddar cheese. We think it\u2019s a home run.",
img:
"https://s3.amazonaws.com/backyardburgers.com/BYB-ChiliCheeseDog_BurntBun.jpg?mtime=20190325101810",
name: "Chili Cheese Hot Dog",
price: 5
,
desc:
"The humble, back yard legend: a juicy all-beef hot dog grilled on an open flame. Topped with ketchup, mustard, and relish.",
img:
"https://s3.amazonaws.com/backyardburgers.com/BYB_HotDog_012.jpg?mtime=20190522104045",
name: "Back Yard Hot Dog",
price: 11
]
,
name: "Salads & Veggie Options",
position: 3,
id: 3,
items: [
desc:
"For a place that serves so much beef, you\u2019d think we forgot about a veggie burger. You\u2019d be sadly mistaken, veggie man or veggie woman! Top yours with lettuce, tomato, red onion, pickles, mustard and/or ketchup.",
img:
"https://s3.amazonaws.com/backyardburgers.com/Turkey-Chicken-Veggie/VeggieBurger-RegularBun.jpg?mtime=20160721141034",
name: "Veggie Burger",
price: 10
,
desc:
'We start with a fresh lettuce base and add tomatoes, red onion, bacon, blue cheese crumbles, candied pecans, dried cranberries, and croutons. Add Grilled, Fried or Blackened Chickn. This salad is one you don"t want to miss.',
img:
"https://s3.amazonaws.com/backyardburgers.com/Hot-Dogs-Sides/Salads/Chopped-Salad.JPG?mtime=20160721141226",
name: "Cranberry Pecan Chicken Salad",
price: 11
,
desc:
"Fried, Grilled or Blackened \u2014 choose your chicken and we\u2019ll lay it on a bed of fresh lettuce, sharp red onions, vine-ripened tomatoes and sliced cucumbers.",
img:
"https://s3.amazonaws.com/backyardburgers.com/Hot-Dogs-Sides/Salads/BYB-ChickenSalad.jpg?mtime=20160721141227",
name: "Back Yard Chicken Salad",
price: 10
,
desc:
"Dive in to fresh, crisp lettuce, sharp red onions, vine-ripened tomatoes and cool sliced cucumbers.",
img:
"https://s3.amazonaws.com/backyardburgers.com/Hot-Dogs-Sides/Salads/BYB-SideSalad.jpg?mtime=20160721141226",
name: "Side Salad",
price: 7
]
,
name: "Fries & Sides",
position: 4,
id: 4,
items: [
desc:
"These fries are the reason for the seasoning that we put on these fries. Crispy outside. Fluffy inside. Yes, you would like fries with that. And with that. And that.",
img:
"https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/seasoned-fries.png?mtime=20160729142140",
name: "Seasoned Fries",
price: 9
,
desc:
"We individually make each of these Waffle Fries in a tiny waffle maker and then\u2026ok fine you caught us. We don\u2019t have a tiny waffler. We make our Waffle Fries the old fashioned way. Hot. Crispy. Always delicious.",
img:
"https://s3.amazonaws.com/backyardburgers.com/Hot-Dogs-Sides/Sides/BYB-WaffleFries.jpg?mtime=20160721141224",
name: "Waffle Fries",
price: 8
,
desc:
"Potatoes, meet Meat. Meat, potatoes. Thick, beefy chili served on top of your choice of our heritage waffle fries or seasoned cut fries. Then sprinkled with a layer of golden Cheddar cheese. Grab a fork.",
img:
"https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/chili-cheese-fries.png?mtime=20160729142102",
name: "Chili Cheese Fries",
price: 6
,
desc:
"Order these crispy, thick-sliced golden rings as your side. Or as your meal. Why not? \u201cOnions for lunch\u201d suddenly has a nice ring to it.",
img:
"https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/onion-rings.png?mtime=20160729142140",
name: "Onion Rings",
price: 10
,
desc:
"It's a plain,fluffy,white baked potato,dude.You know what it is.A classic.Butter & sour cream available upon request.",
img:
"https://s3.amazonaws.com/backyardburgers.com/Plain-Potato.png?mtime=20180805214655",
name: "Regular Baked Potato",
price: 10
,
desc:
"A stacked spud for those who like their baked potato like we like our blind dates: loaded and VERRRRRRRY cheesy. We sprinkle sharp Cheddar, crunchy bacon and a dollop of sour cream on a fluffy, white baked potato.",
img:
"https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/loaded-baked-potato.png?mtime=20160729142141",
name: "Loaded Baked Potato",
price: 9
,
desc:
"Is it hot in here or is it just this cup of hearty beef chili? Oh, it's the chili. It's steaming hot in fact. But the heat really kicks in with the jalepeños. Topped with sharp Cheddar, you get all the flavor of a fall meal you can enjoy any time.",
img:
"https://s3.amazonaws.com/backyardburgers.com/Hot-Dogs-Sides/Sides/Chili.jpg?mtime=20160721141220",
name: "Cup of Chili",
price: 6
]
,
name: "Shakes & Desserts",
position: 4,
id: 4,
items: [
desc:
"We\u2019ve taken this classic American treat and made it even more lovable. How? By offering each flavor in a shake so thick & creamy, you\u2019ll want to skip the straw and dive right in. Available in Chocolate, Strawberry, Vanilla, Banana and Chocolate Oreo.",
img:
"https://s3.amazonaws.com/backyardburgers.com/Shakes-Desserts/Milkshake-Trio.jpg?mtime=20160721141201",
name: "Milk Shakes",
price: 9
,
desc:
"Underneath that flaky, buttery crust, our cobbler is loaded with fillings so good you\u2019d sell your grandma for them. Flavors vary by location \u2014 blackberry, peach, cherry, strawberry & pecan \u2014 all served fresh from the oven.",
img:
"https://s3.amazonaws.com/backyardburgers.com/Shakes-Desserts/Cobbler/BYB-Desserts-Cobbler-Peach.jpg?mtime=20160721141208",
name: "Fresh-Baked Cobbler",
price: 8
,
desc:
"We\u2019ll crumble a bunch of Oreos and put them in a milkshake for you because we want you to enjoy life as much as possible. Grab one of our thick straws and enjoy.",
img:
"https://s3.amazonaws.com/backyardburgers.com/LTO Items/Sides/BYB-OreoShakewCherry.jpg?mtime=20170828143213",
name: "Oreo Milkshake",
price: 9
]
,
name: "Kids Menu",
position: 4,
id: 4,
items: [
desc: "Light and crispy chicken tenders.",
img:
"https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/kids-meal-chicken.png?mtime=20160729142142",
name: "Crispy Tenders",
price: 5
,
desc:
"Our Kid's Burger is made with 100 % Black Angus Beef and topped with ketchup,mustard and pickle.",
img:
"https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/kids-meal-burger.png?mtime=20160729142143",
name: "Kid's Burger ",
price: 11
,
desc:
"This 100% Black Angus Beef Dog is topped with ketchup and mustard.",
img:
"https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/kids-meal-hot-dog.png?mtime=20160729142142",
name: "Back Yard Dog",
price: 7
]
]
]
;
var app = new Vue(
el: "#app",
data:
theMenu: theMenu,
search: ""
,
computed:
menu()
if(this.search.trim() === "")
return this.theMenu.menu[0].categories;
return this.theMenu.menu[0].categories.map(doc =>
const newItems = doc.items.filter(item =>
return item.name.toLowerCase().match(this.search.toLowerCase());
);
return ...doc, items: newItems ;
);
);img width: 20px; height: 20px; <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="col-3 mb--20">
<div class="input-group-over pl--10 round">
<input v-model="search" type="text" class="form-control form-control-sm iqs-input" data-container=".iqs-container" value="" placeholder="Search">
<span class="fi fi-search btn btn-sm pl--12 pr--12 text-gray-500"></span>
</div>
</div>
<div v-for='(cat, index) in menu' :key="index">
<h5 class="text-left m-4"><b>cat.name</b></h5>
<div class="row">
<div v-for='(item, index2) in cat["items"]' :key="index2" class="col-lg-6 col-md-12 mt-2">
<div class="col-12 border pointer">
<div class="p-2">
<div class="d-flex justify-content-end">
<span class="mr-auto"><b>item.name</b></span>
<span><b>$item.price</b></span>
</div>
<div class="text-left text-muted pt-1">
<div class="d-flex justify-content-start">
<img :src="item.img" class="img-fluid pr-3" >
<span class="crop-text">item.desc</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>【讨论】：
谢谢，这越来越近了这会过滤类别标题下的所有内容，例如，如果我过滤辣椒，它会过滤辣椒以及找到辣椒的类别下的所有内容 好的，我是这样实现的，因为问题并不清楚 - 但这个修复尽可能接近你的代码。如果您只想显示名称中包含“chili”的项目，这很容易解决。 @AlexisFortuño 我更新了答案。如果要隐藏空菜单类别，则需要将地图更改为 reduce（使用一些额外的代码）。以上是关于基于 n 嵌套数组按名称过滤的主要内容，如果未能解决你的问题，请参考以下文章