使用计算属性 vuejs 进行高级搜索答案

【问题标题】：advanced search with computed property vuejs使用计算属性 vuejs 进行高级搜索
【发布时间】：2019-03-24 14:45:15
【问题描述】：

大家好，我有一个名为 searchQuery 的数据属性以及一个计算属性，它在 templateArray 中搜索我的项目名称和关键字数组并返回模板。它工作得很好。但是我试图让它更健壮一点。这是我的计算属性

  searchResults: function(){
      return this.filteredTemplateArray.filter((template)=>{
        return template.itemName.toLowerCase().includes(this.searchQuery.toLowerCase())
          || template.keywordArray.toString().toLowerCase().includes(this.searchQuery.toLowerCase());
      })
  }

每个模板都作为一个对象返回，其中包含一个名为 keywordArray 的数组。对象看起来像这样

0:Object
categoryArray:Array[0]
dateAdded:"2016-05-27 10:16:56"
id:"15"
itemId:"73076"
itemName:"Colorful Trans"
keywordArray:Array[2]
0:"Water"
1:"Sparkles"
projectPath:"M:/Projects/Generics/CreativeEngine/2016/ColorfulImageTrans-Scott/ColorfulImageTrans.aep"
renderTime:"30"
stillImageLocation:"12.90"
tested:"1"
thumbName:"COLORFULIMAGETRANS"

基本上我想要做的是，如果它没有返回template.keywordArray.toString().toLowerCase().includes(this.searchQuery.toLowerCase()) 的结果，我想搜索由空格分隔的每个单词，就好像它是它自己的searchQuery 一样。例如，现在如果我输入 sparkles，我会得到一个结果。如果我输入 water 我会得到一个结果，但如果我输入 water sparkles 则不会返回任何结果。如果 searchQuery 有空格，请在关键字数组中搜索水和火花。

【问题讨论】：

这是work as expected吗？

标签： vue.js computed-properties advanced-search

【解决方案1】：

someArray.toString 返回以逗号分隔的数组项 , 因此尝试用空格替换该逗号，如下所示：

template.keywordArray.toString().replace(","," ").toLowerCase().includes(this.searchQuery.toLowerCase());

如果搜索到的单词不按顺序可以使用以下方法：

this.searchQuery.toLowerCase().split(' ').every(val => {
  return template.keywordArray.toString().toLowerCase().split(',').filter(item => {
    return item.includes(val)
  }).length !== 0;
})
/***OR directly search in keywordArray***/
this.searchQuery.toLowerCase().split(' ').every(val => {
  return template.keywordArray.filter(item => {
    return item.includes(val)
  }).length !== 0;
})

示例代码：

var items = ["aaa", "bbb", "ccc", "ddd"]
var s = "aaa bb"
var f = s.split(" ").every(st => {
  return items.filter(item => {
    return item.includes(st)
  }).length !== 0;
})
console.log(f)

【讨论】：