vue 按复选框 true 或 false 值过滤答案

【问题标题】：vue filter by checkbox true or false valuevue 按复选框 true 或 false 值过滤
【发布时间】：2020-06-18 02:07:38
【问题描述】：

在我的 vue 应用程序中，我想要过滤一个列表以仅显示已审核的条目。

我发现的是，当复选框被选中时，我得到所有结果为真，当复选框未被选中时，我得到所有结果都是假的，但是我想要的是当复选框是空无过滤发生，当检查复选框时，我将获得调节的结果。

这是我的尝试，

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

我的过滤器代码，

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

【问题讨论】：

标签： javascript vue.js filter data-binding

【解决方案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>

【讨论】：

【解决方案2】：

当复选框为空（this.showUnModerated 为 false）时，您可以更改过滤条件以返回所有条目。

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

【讨论】：

虽然此代码可以解决 OP 的问题，但最好包含关于您的代码如何解决 OP 问题的说明。这样，未来的访问者可以从您的帖子中学习，并将其应用到他们自己的代码中。 SO 不是编码服务，而是知识资源。此外，高质量、完整的答案更有可能获得支持。这些功能，以及所有帖子都是独立的要求，是 SO 作为一个平台的一些优势，使其与论坛区分开来。您可以编辑以添加其他信息和/或使用源文档补充您的解释。