Vuejs – filterBy OrderBy

This entry is part 6 of 7 in the series VueJs

Our previous post really explored how to output lists onto your page using VueJs, if you need to have a look I insist you do as it is a great starting point on how to render lists that we are now going to add to.

In your applications/web pages you will find the need to filter those lists and order them for different purposes. You might be thinking this is going to be quite complex. If you have been reading the series up to this point then you will feel quite confident this is going to be a daddle and you are right! Vue is so well thought out that it is quite simple to get going. If you’re coming from an Angular 1.* background then you will be familiar with the syntax of rendering lists so you are covered too!

You are all in for a treat as the syntax is quite simple to understand and pick up.

Well lets get straight into some examples:

new Vue({

    el: '#filters',

    data : {

        sortKey : '',

        reverse : 1,

        searchKey : '',

        columns : ['name','age'],

        people : [
            { name: 'Amanda', age : 22 },
            { name: 'John',   age : 21 },
            { name: 'Terry',  age : 18 },
            { name: 'Sarah',  age : 44 },
            { name: 'Chris',  age : 56 },
            { name: 'Paul',   age : 35 },
            { name: 'Ringo',  age : 24 },
            { name: 'Jason',  age : 20 },
        ]
    },

    methods : {
        sortBy : function(sortKey){
            this.reverse = (this.reverse == -1) ? 1 : -1 ;
            this.sortKey = sortKey;
        }
    }

});

So our js is now introducing some data properties to manage a sortKey, a reverse property and a searchKey. All these properites will drive the filtering and sorting of our mini example.

We have a people array of some wonderfully named folk to output and I have added a columns array to be used in our html to output our table of data.

methods : {
  sortBy : function(sortKey){
    this.reverse = (this.reverse == -1) ? 1 : -1 ;
    this.sortKey = sortKey;
  }
}

The sortBy method will take a sortKey property and set our VueJs sortKey property, we will also inverse our reverse property so we can change our ordering of our data.

The only other thing to note in the vue instance is we have added a sortBy method that we will use to be able to change our sorting (Ascending or Descending).

Now the html:

<div id="filters" class="container">
  <br>
  <input type="text" v-model="searchKey" class="form-control">

  <table  class="table table-striped">
    <thead>
      <tr>
        <th v-for="column in columns">
          <a href="#"
             @click="sortBy(column)"
             v-class="{ 'active' : sortKey == column}"
             >
            {{ column }}
          </a>
        </th>

      </tr>
    </thead>
    <tbody>
      <tr v-for="person in people | filterBy searchKey | orderBy sortKey reverse">
        <td>{{ person.name }}</td>
        <td>{{ person.age }}</td>
      </tr>
    </tbody>
  </table>
  <br />
  <pre>{{ $data | json }}</pre>
</div>

Let us run through the html, we have bound to our #filters element, we have added a v-model property to an input for searchKey. This will drive the filtering aspect of this example:

<input type="text" v-model="searchKey" class="form-control">

We then move onto our table, the syntax for outputting lists as we mentioned in the previous lesson is v-for. This is simple as the previous lesson:

<th v-for="column in columns">
   <a href="#"
     @click="sortBy(column)"
     v-class="{ 'active' : sortKey == column}"
     >
     {{ column }}
    </a>
</th>

The only extra going on is we have added a @click handler to the element within the table header element that will enact our sortBy method we added to the JS. We also added a binding to the class to add an active class if the sortKey matches the column name. So lets get onto the core chunk of this examples, the actual data output of people.

<tbody>
  <tr v-for="person in people | filterBy searchKey | orderBy sortKey reverse">
    <td>{{ person.name }}</td>
    <td>{{ person.age }}</td>
  </tr>
</tbody>

So our v-for has added two extra sections of code to it, lets break it down.

filterBy searchKey

This section is to enable our filtering of the data. We use the VueJs filterBy keyword to filter. In the codepen below, type in the search box and VueJs will do all the heavy lifting to sort the data output to match your filtering. How simple.

Next we need to get the ordering of columns, lets look at what drives that:

orderBy sortKey reverse

We use the VueJs orderBy keyword to order our data. sortKey is our data property that we set by clicking the column headers and what drives the ascending or descending is by clicking it again. This is set by reverse, which is another data property we can set. If you wished to force this you can use 1 or -1 to set it e.g. orderBy 'name' 1.

lets see a nice pen of this all tied together!


See the Pen Vuejs by diquinnyonk (@diquinnyonk) on CodePen

Well wasn’t that simple and easy. Once again you see VueJs is making it incredibly simple to put together complex tasks. The key thing I find is how incredibly easy the vue syntax is to read. It makes a lot of sense.

What also makes Vue incredible is how simple it is for simple implementations that we have been using so far. You include the Vue library on your page and you are all ready to go.

In future lessons you will see how far Vue can go and especially how much it can handle for higher end more complex implementations. I can’t wait to show you!

Thanks for reading.

Series Navigation<< VueJs rendering lists – v-forVuejs – filters >>



Random Posts