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

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

v-for

并在<div v-for="result in filteredResults">{{result.name}}</div>中使用它：

#!/bin/bash
echo '1'
while inotifywait -e close_write /home/homeassistant/.homeassistant/automations.yaml
do
    echo 'automations'
    curl -X POST -H "x-ha-access: pass" -H "Content-Type: application/json" http://hassbian.local:8123/api/services/automation/reload
done;

如何过滤数据对象？

1 个答案: