使用带计算filter的Vuejs时出现问题

我正在使用带有复选框的Vuejs编写filter应用程序。 当我使用单一复选框时，它运作良好。 但是，当我检查超过2个复选框时，它会删除结果。

例如，当我选中绿色和红色时，它应该显示标题1和标题2.或者当我检查绿色，红色，活动，完成时，它应该显示标题1和标题2。

您可以访问我的代码： https ： //jsfiddle.net/dalenguyen/xLcvdy0n/1/

HTML代码：

 
 
 
 
 
Filter by
 
   
 
 
 
Health
  
  
 
  Green 
 
  Red 
 
  Yellow 
 
  
 
 
 
Status
  
  
 
  Active 
 
  Completed 
 
  Cancelled 
 
  
 Reset 
  
 
 
 
 
 
 
{{project['title']}}
  
  
 
 
 
Status
 
{{project['Status']}}
 
 
 
Health
 
{{project['Health']}}
 
 
 
  
  
 
 
  

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'); } } }) 

Answer 1

您的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; } 

更新小提琴 。

基本上，您的旧filter代码是单独检查每个filter，您需要一次处理它们。 上面的代码遍历项目并检查项目的值是否在选定的filter值中。

您还使用了很多jQuery，您可以使用本机方法和Vue。