javascript - 如何过滤数据对象？

上下文：我从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链不是正确的方法，因此我更喜欢在进入该方法之前先询问（而且我可能宁愿使用参数重新运行搜索，而不是采用这种方式-但我宁愿避免使用搜索方式）。

最佳答案

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

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>