Instant Search With Vue.js and Axios

Fetch data from a Web API and add a dynamic filter with computed properties

Francesco Bonizzi
Oct 7 · 3 min read
Photo by Agence Olloweb on Unsplash (with added Vue.js logo)

Vue.js is a framework with high potential. It’s easy to learn, fast, and light in terms of bytes. I started my journey writing about Vue.js with How To Build Your First Vue.js Application. Now, I’m going to continue with this article about how to make an instant search input box to filter data that comes from Lorem Picsum Web API.

You’ll find the final result in my repository.


Ingredients

  • Vue.js library: Our Javascript framework
  • Axios library: Promise based HTTP client, we’ll use it to call Lorem Picsum Web API
  • Public Lorem Picsum API url:
  • The file that will compose our application: file, ,

First Steps

First of all, let’s check what the output of Lorem Picsum Web API is:

The Web API returns a JSON array that represents a list of images with an URL, an author, and an ID. Those are the properties that will define our application model.

Then, develop the simple application skeleton, with a header, an input text box, a list of images, and author names. At first, it looks like this:

The body of this webpage is very simple:

With a very easy work of CSS, the style of the images list is:

And the style of the input box:


Vue.js Integration

It’s time to add dynamicity to our little application:

Define a new Vue application:

As you can see, we binded the application to the element , and we defined two properties:

  • : It will contain the search string bound to our input box
  • : It will contain the array of images after download

In the JSON we read earlier, we learned what the properties are that represent our model. And so, the next step is to add all the Vue bindings to our HTML file.

The input box binding to our :

The main list binding:

  • : Makes Vue able to repeat an for each element in the array
  • : It’s important to choose a key to uniquely represent an image in order to be able to animate the list
  • : Without this, we won’t see the image
  • : To print the author name near each photo

Mounted Functions

In Vue.js, you can add mounted functions, which are just hooks that will be called after that the Vue instance is loaded and bound to the interface. In this case, we need to fetch data from the Web API, and this is the right place.

In this example, we’re using to make the HTTP call and manage its callbacks. In particular, we’ll use the response data to our application array, and we’ll write to the output console the eventual errors.


Computed Properties

Computed properties are cached Vue application properties, and they’re only re-computed on reactive dependency changes. Note that if a certain dependency is out of the instance’s scope (i.e. not reactive), the computed property will not be updated.

In this case, we’ll use them to apply the instant search filter.

Firstly, we check for no input by not considering null or empty strings. Then, we need to return an array of photos filtered with the search string. To do this, we use the method and the function as a predicate to choose only the photos with an author that’s contained within the search string.

Every time the input string changes, this property gets re-computed and the interface updates.

This is a little demo of the final result, with the addition of some animations to the list to make it fancier. You can find the whole code here.

Better Programming

Advice for programmers.

Francesco Bonizzi

Written by

Full stack software developer, veggie and rain lover :-) Parma, Italy 🇮🇹 https://www.linkedin.com/in/francesco-bonizzi-037743154/

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade