CODEWITHSUNDEEP
javascriptvue.js
Mahmud Adam
Mahmud Adam

Reputation: 3579

How to filter array using computed property?

How do I filter through an array using a computed property in Vue.js 2.0? This task was quite trivial in older versions of Vue, but now it is more involved. I am displaying data in a table:

 <tr v-for="person in filterPeople">
  <td>{{person.name}}</td>
  <td>{{person.age}}</td> 
</tr>

and I have an input field where I can filter through the names and ages. I am not sure what I am doing wrong here:

computed: {

  filterPeople: function(){
    var self = this
    return this.people.filter(function(p){
      return p.name.indexOf(self.searchDetails) > - 1
   })  
  }
}

If I type in the input it does not filter the people by name or age as I expect. Demo: http://codepen.io/p-adams/pen/AXPKko

Upvotes: 2

Views: 3393

Answers (1)

qw3n
qw3n

Reputation: 6334

Your problem is really simple. You are using an input tag inside of a table. Try adding a containing div tag. Give it the app id and put the input element in it. This should fix the problem.

<div id="app">
  <input
         class="form-control"
         v-model="searchDetails"
         placeholder="filter by name or age"
         >
    <table class="table table-striped" >
      <thead>
      ...rest of code

Vue is still constrained by some of the rules of HTML and one of those is table tags can only have certain tags as direct children.

Upvotes: 5

Related Questions