如何按名称和列表过滤vue中的数组

Posted 2023-02-23

【中文标题】如何按名称和列表过滤vue中的数组

【英文标题】：How to filter an array in vue by name and list

【发布时间】：2021-03-23 14:07:06

【问题描述】：

我有一个带有计算属性的数组，可以按名称过滤。我希望能够按标签过滤，但如果也找到标签，则返回 categories.name。例如，如果我在输入中键入午餐，我希望它返回 Restaurant，如果清空完整列表，则仅使用 Restaurant 填充列表。

 <input type="text" v-model="this.search">
 <ul>
   <li v-for="(category, index) in filter">
   category
   </li>
 </ul> 

data: 
    search: '',
    categories : [
      
        name: "Restaurants",
        tags: ["Restaurants", "Lunch", "Dinner"]
      ,
        
        name: "Barber",
        tags: ["Hair", "Hair Cut", "Shave"]
    
    ]
  ,
computed: 
filter()
 return this.mainCat.filter((doc) => 
     return doc.name.toLowerCase().match(this.search.toLowerCase())

提前致谢。

【参考方案1】：

filteredData() 
 this.categories.filter(c => 
   if(c.tags.includes(this.search)) 
     return c
   
 )

在你的计算属性中添加那个。在您的 v-for 循环中，如果您只想返回名称，则只需以名称为目标。

【讨论】：

谢谢你无论如何都可以显示部分匹配，例如当我使用 .match 时，一旦我开始在输入框中输入，它就会开始显示部分匹配。

@AlexisFortuño，它会在您开始输入时开始过滤。我认为这是过滤数据的最佳方法。