使用带计算过滤器的Vuejs时出现问题 [英] Issue when using Vuejs with computed filter
问题描述
我正在使用带有复选框的Vuejs编写过滤器应用程序。当我使用单一复选框时它很好用。但是，当我检查超过2个复选框时，它会删除结果。
I am writing a filter application by using Vuejs with checkboxes. It works well when I use single checkbox. However, it removes the results when I check more than than 2 checkboxes.
例如，当我选中绿色和红色时，它应显示标题1和标题2.
或当我检查绿色，红色，活动，完成时，它应显示标题1和标题2.
For example, when I check Green and Red, it should show the Title 1 and Title 2. Or when I check Green, Red, Active, Completed, it should show the Title 1 and Title 2.
您可以在以下位置查看我的代码： https://jsfiddle.net/dalenguyen/xLcvdy0n/1/
You can check my code at: https://jsfiddle.net/dalenguyen/xLcvdy0n/1/
HTML code：
HTML code:
<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>
Vuejs代码：
var app = new Vue({
el: '.content',
data: {
projects: [
{
"title": "Title 1",
"Status": "Active",
"Health": "Green",
},
{
"title": "Title 2",
"Status": "Completed",
"Health": "Red",
},
{
"title": "Title 3",
"Status": "Cancelled",
"Health": "Yellow",
},
]
,
checkedHealths: [],
checkedStatuses: []
},
computed: {
filteredProjects: function(){
let filterProjects = this.projects;
$.each(this.checkedHealths, function(value, key){
filterProjects = filterProjects.filter(function(project){
return project.Health == key;
})
});
$.each(this.checkedStatuses, function(value, key){
filterProjects = filterProjects.filter(function(project){
return project.Status.includes(key);
})
});
return filterProjects;
}
},
mounted: function(){
jQuery('input').iCheck({
checkboxClass: 'icheckbox_square-green',
radioClass: 'iradio_square-green',
increaseArea: '20%' // optional
});
jQuery('input').on('ifChecked', function(e){
if($(this).attr('name') === "Healths")
app.$data.checkedHealths.push($(this).val());
if($(this).attr('name') === "Statuses")
app.$data.checkedStatuses.push($(this).val());
});
jQuery('input').on('ifUnchecked', function(e){
if($(this).attr('name') === "Healths"){
let data = app.$data.checkedHealths;
app.$data.checkedHealths.splice(data.indexOf($(this).val()),1);
}
if($(this).attr('name') === "Statuses"){
let data = app.$data.checkedStatuses;
app.$data.checkedStatuses.splice(data.indexOf($(this).val()),1);
}
});
},
methods: {
resetFilter: function(){
$('input').iCheck('uncheck');
}
}
})
推荐答案
你的 filterProjects 方法看起来像这样。
Your filterProjects method should look something like this.
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;
}
更新小提琴。
基本上，您的旧过滤器代码是单独检查每个过滤器，您需要在哪里处理它们立刻。上面的代码循环遍历项目并检查项目的值是否在选定的过滤器值中。
Essentially, your old filter code was checking each filter individually, where you needed to handle them all at once. The above code loops through the projects and checks if the project's value is in the selected filter values.
您还使用了很多jQuery，您可以使用它们原生方法和Vue。
You're also using a lot of jQuery where you could just be using native methods and Vue.
这篇关于使用带计算过滤器的Vuejs时出现问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
