Vue.js

Introduction to Vue.js 2 Filtering with Lodash

Filtering in Vue.js is simple thanks to the filter function built into Vue. Let’s take a look at an introduction filtering with Vue.js and Lodash.

Setup

Each Vue app requires a HTML element to bind with. Generally the HTML element is a div with a unique id attribute. In this example the Vue instance is bound to simple-filter.

<div id="simple-filter">
</div>
var app = new Vue({
    el: "#simple-filter"
});

Basic list unfiltered

Next let’s add default data and display the list.

You’ll notice v-for on the li element. This essentially means for each element in the array do something. In our case print the element between the li element.

<div id="simple-filter">
    <ul>
        <li v-for="animal in animals">{{ animal }}</li>
    </ul>
</div>

var app = new Vue({
    el: "#simple-filter",
    data: {
        animals: ['Zebra', 'Lion', 'Shark', 'Dog', 'Bear', 'Monkey']
    }
});

Produces the following list:

  • Zebra
  • Lion
  • Shark
  • Dog
  • Bear
  • Monkey

Filtering

Vue.js has built in functionality to filter arrays. The basic idea is to iterate over each element with a condition. If the condition is true the element stays in the array. If the condition is false the element is removed from the array.

Within the v-for instead of using the regular animals array in the previous example it is referencing a computed property filteredAnimals. Using the computed property ensures the list is always up to date when searchText is updated.

<div id="simple-filter">
    <input type="text" v-model="searchText" />
    
    <ul>
        <li v-for="animal in filteredAnimals">{{ animal }}</li>
    </ul>
</div>
var app = new Vue({
	el: "#simple-filter",
    data: {
    	searchText: "",
        animals: ['Zebra', 'Lion', 'Shark', 'Dog', 'Bear', 'Monkey']
    },
    computed: {
    	filteredAnimals: function() {
        	var self = this;
        	return this.animals.filter(function (animal) {
            	    return _.includes(animal.toLowerCase(), self.searchText.toLowerCase());
            });
        }
    }
});

filteredAnimals updates itself when searchText changes due to the nature of Vue. The filter function on this.animals is provided by Vue. Each iteration of this.animals passes an animal element to the function. Within the function a true or false value should be returned. Returning true indicates keeping the element and false instructs Vue to remove the element.

In the filter function notice _. this is Lodash. In short Lodash is a library that contains commonly used utility functions such as the includes function. The includes function searches an array, object, or string for a given value. The value in this example is the user provided text searchText. In addition I’ve added a toLowerCase() because users may not always include capital letters. Forcing the compare to be case insensitive is useful for this use case but may not in every case.

Filtering the array does not actually update the animals array. Instead a new array is returned which is then returned from the filteredAnimals computed function.

Working example below:

Share this Story
Load More Related Articles
  • Laravel

    Laravel Upgrade Considerations and Tips

    Laravel claims estimated upgrade times upgrading version to version, but this estimation may not be true for you. Upgrades take time ...
  • PHP

    Using array_reduce to Transform Data

    First, why we might transform data? If we have raw data from a database and need to send data to an ...
  • Programming

    Selecting Your Next App Dependency

    We often turn to open source or proprietary packages for adding functionality to our apps. Here are some key points and questions to ask when selecting your next dependency.
  • Tips

    Trade-offs

    As developers we work with non-technical people and we can do a better job connecting with them. Non-technical people don’t care ...
  • Life Pro Tip Tips

    Mental Snapshots

    Think back to a time where you accomplished something you had no idea how to do or when you accomplished something ...
  • Laravel Programming

    The Importance of Eager Loading Laravel Relationships

    Problem Page took over 30 seconds to load locally on a local Vagrant virtual machine. After investigating the results were astonishing, ...
Load More By Nick Escobedo
  • JavaScript Vue.js

    Website Launch: Champion Spotlight

    I launched a new website dedicated to finding champion spotlights: http://championspotlight.lol for the game League of Legends (LoL). If you haven’t ...
  • Vue.js

    Introduction to Vue.js 2 Filtering with Lodash

    Filtering in Vue.js is simple thanks to the filter function built into Vue. Let's take a look at an introduction filtering with Vue.js and Lodash.
Load More In Vue.js

Check Also

Laravel Upgrade Considerations and Tips

Laravel claims estimated upgrade times upgrading version to ...