Search bar in Vue flickr app not giving expected results - vue.js

Question

I’m using Vue to create a Flickr app and want to add a search bar so users can search for photos containing tags with their search term.
What i’ve done so far produces some results, but I noticed the photos don’t always include my search term as tags, for example if I search 'cats' the returned items might have the tags 'cat' but not 'cats' and sometimes it doesn't include tags that are even slightly similar.
There's no console errors, so i'm not sure where to find the error.
<template>
<b-container>
<b-row>
<b-col md="12">
<b-input-group size="lg" prepend="Search" class="flickr-search">
<b-form-input v-model="search"></b-form-input>
</b-input-group>
</b-col>
</b-row>
<b-row>
<b-card-group columns>
<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-row>
</b-container>
</template>
<script>
import jsonp from "jsonp";
export default {
name: 'PhotoFeed',
data: function () {
return {
Photos: [],
apiURL: "https://api.flickr.com/services/feeds/photos_public.gne?format=json",
search: ''
}
},
mounted(){
this.getFlickrFeed();
},
methods: {
getFlickrFeed(){
let jsonp = require('jsonp');
let self = this;
jsonp(this.apiURL, {name: 'jsonFlickrFeed'}, (err, data) => {
if (err) {
console.log(err.message);
}
else {
self.Photos = data.items;
}
})
},
formatAuthor(authorString){
if (authorString) return authorString.split("\"")[1];
return "Author";
},
splitTags(tagsString) {
if (tagsString) return tagsString.split(" ");
}
},
watch: {
search(newVal, oldVal) {
let self = this;
let apiURL = "https://api.flickr.com/services/feeds/photos_public.gne?tags=" + self.search + "&format=json";
let jsonp = require('jsonp');
jsonp(apiURL, {name: 'jsonFlickrFeed'}, (err, data) => {
if (err) {
console.log(err.message);
}
else {
self.Photos = data.items;
}
})
}
}
}
</script>

Answer 1

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
}
}