vue 按復選框 true 或 false 值過濾

Question

在我的 vue 應用程序中，我想要過濾一個列表以僅顯示已審核的條目。

我發現的是，當復選框被選中時，我得到所有結果為真，當復選框被取消選中時，我得到所有結果都是假的，但是我想要的是當復選框為空時沒有過濾發生，當復選框被選中時，我得到了已審核的結果。

這是我的嘗試，

<input type="checkbox" v-model="showUnModerated" /> Show only unmoderated listings</label>

我的過濾器代碼，

return this.listing.listings.filter(listing => (this.showUnModerated? 1: 0) === listing.moderated);

Answer 1

您可以使用您的復選框添加一組修改列表和v-model 。因此您可以獲得修改后的列表。

 new Vue({ el: '#app', data: { showChecked: [] } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id='app'> <input type="checkbox" value='1' v-model="showChecked" /> element 1</label> <br> <input type="checkbox" value='2' v-model="showChecked" /> element 2</label> <br> {{showChecked}} </div>

Answer 2

當復選框為空（this.showUnModerated 為 false）時，您可以更改過濾條件以返回所有條目。

返回 this.listing.listings.filter(listing => (this.showUnModerated? (1===listing.moderated): true);