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

正如评论中的讨论一样，根本原因应该是：

您显然没有在if(this.search != null){}内部返回true / false，它默认导致return undefined。

所以我的意见是使用Javascript Array.every或Array.some。您也可以使用 for 循环+ 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

filteredSmoothies没有返回列表。您进行遍历以查看排序中是否包含个体，但是您对该信息不做任何事情。我认为您需要根据分类结果修改排序列表。

VueJS计算的数据搜索不起作用

2 个答案: