VueJS компьютерный поиск данных не работает

Question

Я пытаюсь создать функцию поиска в моем приложении Vue.js 2. Однако, хотя мой алгоритм дает мне правильные результаты, я не получаю надлежащий фильтр. Прямо сейчас, когда я запускаю поиск, я ничего не получаю на странице. Вот мой код:

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
    }
  })
}

}

Вот мой соответствующий HTML:

<div class="container">
  <label for="search">Search: </label>
  <input type="text" name="search" v-model="search">
</div>
<div class="index container">
  <div class="card" v-for="smoothie in filteredSmoothies" :key="smoothie.id">
    <div class="card-content">
      <i class="material-icons delete" @click="deleteSmoothie(smoothie.id)">delete</i>
      <h2 class="indigo-text">{{ smoothie.title }}</h2>
      <p class="indigo-text">{{ smoothie.description }}</p>
      <ul class="ingredients">
        <li v-for="(ing, index) in smoothie.category" :key="index">
          <span class="chip">{{ ing }}</span>
        </li>
      </ul>
    </div>
    <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>

Answer 1

Как показывают обсуждения в комментариях, первопричина должна быть:

вы не вернули true / false, очевидно, внутри if(this.search != null){}, это вызывает return undefined по умолчанию.

Поэтому мое мнение таково: используйте Javascript Array.every или Array.some. Также вы можете использовать для loop + break для реализации цели.

Ниже приведено одно простое демо для 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
    }
  })
}

или вы все равно можете использовать forEach, коды будут такими:

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

Answer 2

FilterSmoothies не возвращает список. Вы перебираете, чтобы увидеть, содержатся ли в нем отсортированные вещи, но вы ничего не делаете с этой информацией. Я думаю, что вам нужно изменить свой отсортированный список на основе результатов отдельных вещей.