如何過濾數據對象？

上下文：我從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不是正確的方法，我傾向於在跳入之前詢問（我可能寧願重新運行帶有參數的搜索而不是這種方式 - 但我寧願避免搜索方式）

來源

2017-05-31 WoJ

創建計算財產只返回過濾結果：

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>

來源

2017-05-31 18:17:57 thanksd

如何過濾數據對象？

回答

相關問題