[Vuejs]-Search bar in Vue flickr app not giving expected results

by

0👍

An error won’t be thrown if the flicker API doesn’t return any results.

In the UI you can let you users know they can provide a comma separated list of keywords, example cats, cat

You can also check no see if there are any results and display a message if none were found here is just one simple example implementation:

Relevant HTML

  <b-card-group columns v-if="Photos.length">
    <b-col v-for="photo in Photos" class="item" md="12">
      <b-card :title="photo.title"
              :img-src="photo.media.m"
              img-alt="Image"
              img-top
              img-fluid
              tag="article"
              style="max-width: 20rem;"
              class="mb-2">
        <span class="item-date">31 May 2017</span>
        <hr/>
        <p>By <a :href="'https://www.flickr.com/photos/' + photo.author_id" :title="formatAuthor(photo.author)" target="_blank">{{ formatAuthor(photo.author) }}</a></p>
        <ul class="tags">
          <li v-for="tag in splitTags(photo.tags)" class="item-tag">
            <a :href="'https://www.flickr.com/photos/tags/' + tag" target="_blank" class="item-taglink">{{ tag }}</a>
          </li>
        </ul>
      </b-card>
    </b-col>
  </b-card-group>

  <b-col md="12" v-else-if="!Photos.length && errorMessage">
    <p>{{errorMessage}}</p>
  </b-col>

Relevant JS

data: function () {
    return {
        Photos: [],
        apiURL: "https://api.flickr.com/services/feeds/photos_public.gne?format=json",
        search: '',
        errorMessage: null
    }
}

In both getFlickerFeed & watch: search:

if (err) {
  self.errorMessage = err.message;
}
else {
  self.Photos = data.items;
  if (self.Photos.length) {
    self.errorMessage = null;
  } else {
    self.errorMessage = 'No results found for: ' + self.search
  }
}

Leave a comment