Filter Table or List Result In VueJs

In Vuejs 1 , there was an inbuilt filter to filter table result using filterBy but in Vuejs 2 it was deprecated.

Hence you need to write your own custom query to achieve same result.

This tutorial will show you how to achieve same.

The application server is written in nodejs , express as the web framework and vash as the template engine.

I will be using a fake an API from https://jsonplaceholder.typicode.com/users

This is the nodejs server code

var express = require("express");
var app = express();

var port = process.env.PORT || 3000;

app.use("/assets", express.static(__dirname + "/public"));

app.set("view engine", "vash");

app.get("/", (req, res) => {
  res.render("index");
});

app.listen(port);

Next is the View i.e the html to display our data and provide search.

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" media="screen"
/>
<div class="container">
    <h1>Filter Todo Table By Search in VueJs
        <small>(
            <i class="glyphicon glyphicon-filter"></i>)</small>
    </h1>
    <div class="row">
        <div class="col-md-6" id="todo"> 
            <div class="panel panel-success">
                <div class="panel-heading">
                    <h3 class="panel-title">TODOS</h3> 
                   
                </div>
                <div class="panel-body">
                    <input type="text" class="form-control" placeholder="search" v-model="search"/>
                </div>
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Name</th>
                            <th>UserName</th>
                            <th>Email</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,index) in computedData" :key="item.id">
                            <td>{{ ++index }}</td>
                            <td>{{ item.name }}</td>
                            <td>{{ item.username }}</td>
                            <td>{{ item.email }}</td>
                        </tr>

                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue"></script>  
<script src="/assets/data.js"></script>

Finally , the Vuejs code

var app = new Vue({
  el: "#todo",
  data: {
    todos: [],
    search:'',
    computedTodos:[]
  },
  mounted() {
    loadAll: {
      axios
        .get("https://jsonplaceholder.typicode.com/users") 
        .then(response => {
          this.todos = response.data;
        })
        .catch(function(error) {});
    }
  },
  computed: {
    computedData: function() { 
      this.computedTodos = this.todos;  
      if (this.search) {
        this.computedTodos = this.computedTodos.filter(item => item.name.toUpperCase().includes(this.search.toUpperCase()) || item.username.toUpperCase().includes(this.search.toUpperCase()) || item.email.toUpperCase().includes(this.search.toUpperCase()));   
        return this.computedTodos;
      }
      return this.computedTodos;
    }
  }  
});

Snapshot of the html table.

total

Search for BRET
search

Source on my github page

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s