計算されたフィルタでVuejsを使用するときの問題

Question

私は、チェックボックス付きのVuejsを使ってフィルタアプリケーションを作成しています。私は単一のチェックボックスを使用するとうまく動作します。ただし、2つ以上のチェックボックスをチェックすると結果が削除されます。

例えば、私は緑と赤をチェックするとき、それはタイトル1とタイトル2 を示すべきであるまたは私はグリーン、レッド、アクティブ、完了を確認したときに、それがタイトル1を示さなければならないし、タイトル2

あなたはで私のコードを確認することができます：https://jsfiddle.net/dalenguyen/xLcvdy0n/1/

HTMLコード：

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

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

fiddleが更新されました。

元来、古いフィルタコードでは、各フィルタを個別にチェックしていましたが、すべてのフィルタを一度に処理する必要がありました。上記のコードはプロジェクトをループし、プロジェクトの値が選択されたフィルタ値にあるかどうかをチェックします。

また、ネイティブメソッドとVueだけを使用できるjQueryをたくさん使用しています。