VueJS Computed Data Search Not Functioning

I am attempting to create a search function in my Vue.js 2 application. However, even though my algorithm is giving me the right results, I am not getting the proper filter. Right now, whenever I run a search, I get nothing on the page. Here is my code:

computed:{
filteredSmoothies: function(){
return this.smoothies.filter(smoothie => {
var stuff = smoothie.title.split(" ").concat(smoothie.description.split(" ")).concat(smoothie.category)
var sorted = ;
for (var i = 0; i < stuff.length; i++) {
sorted.push(stuff[i].toLowerCase());
}
console.log(sorted)

if(this.search != null){
var indivthings = this.search.split(" ")
indivthings.forEach(item => {
if(sorted.includes(item.toLowerCase())){console.log("true")} else {console.log("false")}
if(sorted.includes(item.toLowerCase())){return true}
})
} else {
return true
}
})
}


}

Here is my relevant HTML:


Search:









delete

{{ smoothie.title }}

{{ smoothie.description }}

• 
  {{ ing }}
  

<span class="btn-floating btn-large halfway-fab pink">
<router-link :to="{ name: 'EditSmoothie', params: {smoothie_slug: smoothie.slug}}">
<i class="material-icons edit">edit</i>
</router-link>
</span>
</div>
</div>

I am not trying to filter through the indivthings. I am only trying to filter through smoothies. @Sphinx
– Vicky
Jun 30 at 0:12

2 Answers
2

As the discussions in the comments, the root cause should be:

you didn't return true/false apparently inside if(this.search != null){}, it causes return undefined defaultly.

if(this.search != null){}

return undefined

So my opinion is use Javascript Array.every or Array.some. Also you can use for loop + break to implement the goal.

Below is one simple demo for Array.every.

computed:{
filteredSmoothies: function(){
return this.smoothies.filter(smoothie => {
var stuff = smoothie.title.split(" ").concat(smoothie.description.split(" ")).concat(smoothie.category)
var sorted = ;
for (var i = 0; i < stuff.length; i++) {
sorted.push(stuff[i].toLowerCase());
}
console.log(sorted)

if(this.search != null){
var indivthings = this.search.split(" ")
return !indivthings.every(item => { // if false, means item exists in sorted
if(sorted.includes(item.toLowerCase())){return false} else {return true}
})
} else {
return true
}
})
}


or you can still use forEach, the codes will be like:

let result = false
var indivthings = this.search.split(" ")
indivthings.forEach(item => {
if(sorted.includes(item.toLowerCase())){result = true}
})
return result


Perfect. Only change I might make is to use Array.prototype.some()
– Derek
Jun 30 at 1:33

Array.prototype.some()

@Derek hah, you are right, my fever brain, forgot this API.
– Sphinx
Jun 30 at 2:42

All good man, we all forget features at some point! Especially with how vast and dynamic JS is
– Derek
Jun 30 at 2:44

filteredSmoothies is not returning a list. You iterate over to see if indivthings is contained within sorted, but you don't do anything with that information. I think you need to modify your sorted list based on the results of indivthings.

Yes, its returning a list
– Derek
Jun 29 at 19:41

ok, then whats the indivthings for? its not inside another function
– Joel Lucsy
Jun 29 at 19:44

Its used to iterate over each of the search items
– Derek
Jun 29 at 19:46

Yeah, but if you look, its encapsulated by forEach, which means it only ends the execution of the current forEach item iteration, the enclosing filter is unaffected entirely
– Derek
Jun 29 at 20:32

forEach

forEach

filter

@Vicky the root cause should be you doesn't return true/false inside if(this.search != null){}, actually you did is return true/false inside the callback of indivthings.forEach(}
– Sphinx
Jun 30 at 0:18

if(this.search != null){}

indivthings.forEach(}

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.