Getting Started with Vue.js: Lesson 18 of 25

Searching Gifs

Up Next

Components: Gif Box

Autoplaying in 7 seconds!

Cancel

The next thing we'll do to our gif app is add the ability to search. Just like you can search on the home page of giphy.com, we'll let our users search as well.

The Search Input

We'll add a section above our trending section and create an input box to handle the search:

<input type="text" class="input" name="query" v-model="query">

Notice we have bound this input to a data variable called query. We need to create that variable now in the data object. We'll default this to a blank string:

Table of Contents

    data: {
        ...
        query: ''
    }

    The Searched Gifs Grid

    We'll use the same HTML as we did for trending to create our gif grid. Now that we have two grids, we'll need to rename the gifs variable to something else.

    JavaScript

    Since we're doing two grids of gifs, let's name them: searchedGifs and trendingGifs. Rename those in our data object:

    data: {
        searchedGifs: null,
        trendingGifs: null
    }

    Make sure to change your trending grid to use v-for="gif in trendingGifs" and also your fetchGifs method should bind to the new trendingGifs instead of gifs.

    HTML

    Now we can use all of the above to generate our two grids:

    <!-- our template -->
      <section id="app" class="section container">    
    
        <!-- SEARCH ========================================== -->
        <h2 class="title">Search</h2>
    
        <input type="text" class="input" name="query" v-model="query">
    
        <div class="columns is-multiline" v-if="searchedGifs">
          <div class="column is-one-quarter" v-for="gif in searchedGifs">
            <div class="gif-box">
              <a :href="gif.url">
                <img class="gif-image" :src="gif.images.original.url">
              </a>
              <a 
                class="gif-user" 
                v-if="gif.user" 
                :href="gif.user.profile_url">
                  <img :src="gif.user.avatar_url" height="40" width="40">
                  {{ gif.user.display_name }}
              </a>
            </div>
          </div>
        </div>
    
        <!-- TRENDING ======================================= -->
        <h2 class="title">Trending</h2>
        <div class="columns is-multiline" v-if="trendingGifs">
          <div class="column is-one-quarter" v-for="gif in trendingGifs">
            <div class="gif-box">
              <a :href="gif.url">
                <img class="gif-image" :src="gif.images.original.url">
              </a>
              <a 
                class="gif-user" 
                v-if="gif.user" 
                :href="gif.user.profile_url">
                  <img :src="gif.user.avatar_url" height="40" width="40">
                  {{ gif.user.display_name }}
              </a>
            </div>
          </div>
        </div>
    
      </section>

    Searching for Gifs

    Finally, with our template and data out of the way, let's work on the events and interactivity.

    We'll need to create a new method for searching for gifs. The url for searching the Giphy API is:

    http://api.giphy.com/v1/gifs/search

    We'll need to pass in an api_key and a q for the query.

    searchGifs: function() {
        const url = `${this.apiUrl}/search?api_key=${this.apiKey}&q=${this.query}&limit=8`;
    
        fetch(url)
            .then(response => response.json())
            .then(data => this.searchedGifs = data.data);
        }

    We're binding the gif result to our searchedGifs variable and that will automatically show in the template since Vue is reactive.

    Go ahead and try searching now!

    Chris Sevilleja

    173 posts

    Co-founder of Scotch.io. Slapping the keyboard until something good happens.