Issue when using Vuejs with computed filter

Question

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.

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.

You can check my code at: https://jsfiddle.net/dalenguyen/xLcvdy0n/1/

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 code:

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

Bert · Accepted Answer · 2017-04-19 19:01:42Z

3

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

Updated fiddle.

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.

You're also using a lot of jQuery where you could just be using native methods and Vue.

edited Apr 19, 2017 at 19:01

answered Apr 19, 2017 at 18:52

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Dale Nguyen Over a year ago

Thanks @Bert Evans. You're amazing!

Dale Nguyen Over a year ago

It's because iCheck requires JQuery, so I use it. Is there any best practices that you could recommend? Thanks,

Bert Over a year ago

@DaleNguyen Typically, with jQuery plugins, you want to wrap them in a Vue component. In this case, you might want to create an iCheck checkbox component, and any jQuery code would only be used inside it. This is an example from the Vue documentation of a wrapped plugin. vuejs.org/v2/examples/select2.html

Bert Over a year ago

@DaleNguyen This is a quick example of how you might do one for iCheck. It won't work as is inside your fiddle, but it's one way to go. codepen.io/Kradek/pen/OmMvEJ?editors=1010

Dale Nguyen Over a year ago

Thank you so much. I will take a look into that to make my code better.

Collectives™ on Stack Overflow

Issue when using Vuejs with computed filter

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related