Filter Table by column value VueJS Array

Question

I wrote this function to filter by status type. It's working but every time I filter the table data rows get disappeared. There're two status ( Active and Completed ) I wrote this code for filter,

                    <div class="DropContent">
                        <label class="LabelView">Status</label><br />
                        <select class="dropdown-size form-control" v-model="ins_status" v-on:change="filterData">
                        <option v-for="(option, i) in optionFilter" :value="i">
                            {{ option }}
                        </option>
                        </select>
                    </div>

                   filterData(evt) {
                     var val = evt.target.value;
                     if(val==0){
                        this.inspections = this.inspections.filter(function(e){return e.status = "Scheduled"});
                     }if(val==1){
                        this.inspections = this.inspections.filter(function(e){return e.status != "Scheduled"});    
                     }
                  },

This is the array that load data to table from a for loop,

Also inside 0: Object There's another array which contains data like above objects from the screenshot

So totally there're 3 rows for the table. Before calling filter function, all 3 rows are visible. but when I filter again and again it reduces the no of rows of the table. According to given data if I filter three times no table records are shown in the table. Help me thanks.

Anant Vikram Singh · Accepted Answer · 2022-05-27 09:42:32Z

1

try to store this.inspections in a local variable and then filter that variable and store the result inside this.inspections.

filterData(evt) {
  var val = evt.target.value;
  var inspections = this.inspections; // save inspections in local variable
  if(val==0){
    this.inspections = inspections.filter(function(e){return e.status = "Scheduled"});
  } if(val==1){
    this.inspections = inspections.filter(function(e){return e.status != "Scheduled"});    
  }
}

answered May 27, 2022 at 9:42

Anant Vikram Singh

5681 gold badge5 silver badges18 bronze badges

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

4 Comments

Devin Y Over a year ago

still the same not working.

Anant Vikram Singh Over a year ago

can you create a working Jsfiddle for the same ?

Devin Y Over a year ago

you were right. I just missed a prop. with a prop your method succeed. Thanks mate!

Anant Vikram Singh Over a year ago

no worries mate!, happy to help you @DevinY

Devin Y · Accepted Answer · 2022-05-30 14:47:19Z

0

The problem was I modified the existing array. So each time I filter it changes. which means it changes the original table data even I assign it to a local variable. So I passed an extra prop to my working component and assigned it to a local variable.

answered May 30, 2022 at 14:47

Devin Y

1372 silver badges18 bronze badges

Collectives™ on Stack Overflow

Filter Table by column value VueJS Array

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related