在 vue.js 中使用空格搜索问题答案

【问题标题】：Problem searching with blank space in vue.js在 vue.js 中使用空格搜索问题
【发布时间】：2022-06-13 21:40:44
【问题描述】：

vue.js 中的输入搜索字段有问题。

在我的数据中，我有嵌套的数组，它们有标题。当我搜索标题并点击空格时，什么也没有出现。并且标题应该用空格搜索。例如，我有一个标题“商店中的铅笔”，当我在输入中写“铅笔”时，它确实与所有其他信息一起出现。当我写“铅笔”时，什么都没有出现。此外，在某些我无法到达空白处的标题中，只有在我写“笔”时才会出现结果。这是我的代码，我尝试过修剪和拆分，但没有奏效。非常感谢！

computed: {
getfiltered() {
    const search = this.search;
    return (
    this.categories.filter(category =>
    category.title.includes(search.toLowerCase()) ||
    category.infos.some(info => info.name.includes(search)
    )
  )
)
},

这里是输入框

<input type="text" v-model="search" placeholder="Search" />
   <div v-for="(category, categoryIndex) in getfiltered" :key="categoryIndex">
     <h2>{{category.title}}</h2>
   </div>

还有数据

export default {
  data: () => ({
    search: '',
      categories: [
         {
           title: 'Pencils in store',
           infos: [{name:'Bic'},
                   {name:'Crayola'}]
          }, //...and so on

【问题讨论】：

应该是 сategory.title.toLowerCase().includes(search.toLowerCase())。 “Pencils in”没有理由不能以这种方式工作，除非有不一致的空格需要规范化。目前还不清楚“笔”是怎么回事。如果您需要不匹配部分单词，那么您可以拆分为数组并检查一个是否是另一个的子集

标签： vue.js search input filter

【解决方案1】：

问题以@Estus Flask 评论的方式解决。 сategory.title.toLowerCase().includes(search.toLowerCase())

【讨论】：