javascript - 如何过滤数据对象？

Question

上下文:我从 Elasticsearch 收到搜索结果(下面的示例)，并将其放入 Vue.js data目的。然后我通过 <div v-for="result in results">{{result.name}}</div> 列出数据.

var vm = new Vue({
  el: "#root",
  data: {
    results: [{
        'name': 'john',
        'big': true
      },
      {
        'name': 'jim',
        'tall': true
      },
      {
        'name': 'david'
      }
    ]
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.js"></script>
<div id="root">
  <div v-for="result in results">{{result.name}}</div>
</div>

我现在想过滤结果。为此，我将设置开关 bound via v-model .

问题:在 Vue.js 中处理过滤的正确方法是什么？

我想仅渲染(通过 v-if ，我猜)来自 results 的元素与过滤器匹配(例如，检查 big - 因此只有 john 应该可见)，或过滤器的串联(逻辑 AND )。

我很难转变为 Vue.js 哲学的部分是“如果该元素中存在所有事件开关(值 true )，则显示该元素。

因为我确信有一条 v-if 链s 不是正确的方法，我更愿意在跳入该方法之前先询问一下(我可能宁愿使用参数重新运行搜索，也不愿走这条路 - 但我宁愿避免搜索方式)。

Answer 1

创建一个仅返回过滤结果的计算属性:

computed: {
  filteredResults() {
    return this.results.filter((result) => {
      // your filter logic, something like this:
      // return result.big || result.tall
    });
  }
}

并在 v-for 中使用它:

<div v-for="result in filteredResults">{{result.name}}</div>