Javascript 将Vuejs与计算筛选器一起使用时出现问题
我正在使用带有复选框的Vuejs编写一个过滤器应用程序。当我使用单复选框时,它工作得很好。但是,当我选中超过2个复选框时,它会删除结果 例如,当我选中绿色和红色时,它应该显示标题1和标题2。 或者当我选中绿色、红色、活动、完成时,它应该显示标题1和标题2 您可以在以下位置查看我的代码: HTML代码:Javascript 将Vuejs与计算筛选器一起使用时出现问题,javascript,jquery,vuejs2,Javascript,Jquery,Vuejs2,我正在使用带有复选框的Vuejs编写一个过滤器应用程序。当我使用单复选框时,它工作得很好。但是,当我选中超过2个复选框时,它会删除结果 例如,当我选中绿色和红色时,它应该显示标题1和标题2。 或者当我选中绿色、红色、活动、完成时,它应该显示标题1和标题2 您可以在以下位置查看我的代码: HTML代码: <div class="content"> <div class="row"> <div class="col-md-3 col-sm-4">
<div class="content">
<div class="row">
<div class="col-md-3 col-sm-4">
<div class="box box-info">
<div class="box-header with-border">
<h3 class="box-title">Filter by</h3>
</div>
<!-- /.box-header -->
<!-- form start -->
<div class="box-body">
<div class="box box-success box-solid">
<div class="box-header with-border">
<h3 class="box-title">Health</h3>
<!-- /.box-tools -->
</div>
<!-- /.box-header -->
<div class="box-body" style="display: block;">
<div class="form-group col-md-12">
<input type="checkbox" id="green" value="Green" v-model="checkedHealths" name="Healths">
<label for="green">Green</label>
</div>
<div class="form-group col-md-12">
<input type="checkbox" id="red" value="Red" v-model="checkedHealths" name="Healths">
<label for="red">Red</label>
</div>
<div class="form-group col-md-12">
<input type="checkbox" id="yellow" value="Yellow" v-model="checkedHealths" name="Healths">
<label for="yellow">Yellow</label>
</div>
</div>
<!-- /.box-body -->
</div>
<div class="box box-success box-solid">
<div class="box-header with-border">
<h3 class="box-title">Status</h3>
<!-- /.box-tools -->
</div>
<!-- /.box-header -->
<div class="box-body" style="display: block;">
<div class="form-group col-md-12">
<input type="checkbox" id="active" value="Active" v-model="checkedStatuses" name="Statuses">
<label for="active">Active</label>
</div>
<div class="form-group col-md-12">
<input type="checkbox" id="completed" value="Completed" v-model="checkedStatuses" name="Statuses">
<label for="completed">Completed</label>
</div>
<div class="form-group col-md-12">
<input type="checkbox" id="cancelled" value="Cancelled" v-model="checkedStatuses" name="Statuses">
<label for="cancelled">Cancelled</label>
</div>
</div>
<!-- /.box-body -->
</div>
<button type="button" class="btn btn-block btn-info" v-on:click="resetFilter">Reset</button>
</div>
<!-- /.box-body -->
</div>
</div>
<div class="col-md-9 col-sm-8">
<div class="col-md-4" v-for="project in filteredProjects">
<div class="box collapsed-box">
<div class="box-header with-border">
<h4 class="box-title"><a href="">{{project['title']}}</a></h4>
<!-- /.box-tools -->
</div>
<!-- /.box-header -->
<div class="box-body">
<table class="table table-striped">
<tr>
<td>Status</td>
<td>{{project['Status']}}</td>
</tr>
<tr>
<td>Health</td>
<td>{{project['Health']}}</td>
</tr>
</table>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
</div>
</div>
</div>
您的
filterProjects
方法应该如下所示
filteredProjects: function(){
let filterProjects = this.projects;
if (this.checkedHealths.length > 0){
filterProjects = filterProjects.filter(project => {
return this.checkedHealths.includes(project.Health);
})
}
if (this.checkedStatuses.length > 0){
filterProjects = filterProjects.filter(project => {
return this.checkedStatuses.includes(project.Status)
})
}
return filterProjects;
}
更新
基本上,您的旧过滤器代码是单独检查每个过滤器,您需要一次处理所有过滤器。上面的代码在项目中循环,并检查项目的值是否在选定的过滤器值中
您还使用了很多jQuery,可以只使用本机方法和Vue。谢谢@Bert Evans。你太棒了!这是因为iCheck需要JQuery,所以我使用它。您有什么可以推荐的最佳实践吗?谢谢,@DaleNguyen通常,对于jQuery插件,您希望将它们封装在Vue组件中。在这种情况下,您可能需要创建一个iCheck复选框组件,任何jQuery代码都只能在其中使用。这是Vue文档中包装插件的一个示例@DaleNguyen这是一个如何为iCheck做一件事的快速示例。它不会像你的小提琴一样工作,但这是一种方法。非常感谢你。我将对此进行研究,以使我的代码更好。
filteredProjects: function(){
let filterProjects = this.projects;
if (this.checkedHealths.length > 0){
filterProjects = filterProjects.filter(project => {
return this.checkedHealths.includes(project.Health);
})
}
if (this.checkedStatuses.length > 0){
filterProjects = filterProjects.filter(project => {
return this.checkedStatuses.includes(project.Status)
})
}
return filterProjects;
}