24 June, 2018 Tags: , ,

Building a realtime feel-like search with Vue.js, v-model and .filter()

Vue is trending and I definitely believe that the time invested on learning it, is truly worth, specially if you value time and productivity. I’ve been working with Vue and React on different projects, I always achieve the same thing with both libraries/framework, but in terms of how fast you can deliver, in my personal opinion and experience, vue definitely is ahead of React.

On this blog post, I will show how to implement a form that search from a given collection of data. It’s simple, I know, that’s why it will be fun. Check the live version and source code here: http://jsbin.com/qaliyaw/edit?html,css,js,output

Topics

Setup

Well, there’s no setup at all, that’s the magic of vue, you can just load the vue file script from a cdn into the <body> tag and start hacking.

Bootstrapping the application

I want to simplify this post as much as possible, this small app will have a search input and an unordered list displaying the countries. Our source of data will be https://restcountries.eu/rest/v2/all.

So, in the code above I firstly defined the whole component structure, an input field and an unordered list, nothing magic yet. In the second file which the vue script app file, I created a basic vue app two state properties defined and the created life-cycle method defined:

  • countries: It will store an array of countries returned from the API call.
  • search: This property will be responsible to store all the inputs given from the search field.
  • created() method: This life-cycle method is executed every time the component is created. We will make the AJAX call from here.

Making an HTTP Request with Fetch API and Rendering the results with v-for

Now wee need to do a few updates in the existent code base by making an GET request to the restcountries API using Fetch method, saving the results into the countries state property and finally rendering it into the component with v-for directive.

So far so good, but there’s no searching happening yet. Now we need a way to dynamically each of letters that the user will type, and on this process show different results according to the inputs given.

v-model comes in action

The v-model directive creates a two-way binding on a form element or a component. It’s a short way to achieve the scenario described before, v-model will allow the search state property being updated while the user types into the search field.

Update the input tag by adding the v-model directive equals to the search state property.

Filtering the results with .filter() and Computed Properties

We already have a parameter to perform the search, and right now the results are stored in an array, the best approach here is to use the new .filter() method for arrays introduced in ES6.

Before we continue, there’s one more thing to consider, since we’re search state property is dynamically updated by v-model, and for each update the countries state property needs to be filtered with some logic, Vue offer us the computed properties.

They are similar to state properties but they are the best approach when the application need to perform complex logic in the value of a property, and also, Vue update computed properties when a change occurs, on this case the search state property.

To make everything works, just replace the countries state properties in the v-for to the countriesResults computed property.

Conclusion

Thanks for reading, let your comments bellow, I would love to hear your thoughts!

OTHER ARTICLES