I am experimenting with creating a VueJS application that can utilize multiple APIs to fetch and display images to the user. This is my first attempt at using Vue, so please be patient if I rely on vanilla JS instead of VueJS functions.
The desired functionality is for the user to click a button, triggering a request for an image from one of the APIs available. The twist is that I want the Flickr API to require a specific tag (chosen randomly from an array) each time it's called. However, currently, the tag remains the same every time the function is executed again without page reload.
Why is this happening and how can I resolve it? Your help is greatly appreciated.
Here is the code I have written so far:
var vm = new Vue({
el: '#app',
data() {
return {
// some data
apis: [this.flickr(), this.desktopper()],
wallpaper: '',
wallpapers: [],
screenWidth: window.screen.width,
screenHeight: window.screen.height,
}
},
methods: {
// Random number generator
randomNumber(min, max) {
return Math.floor(Math.random() * (max - min) + min);
},
// Main function to call an API and get the image source
requestWallpaper() {
var wallpaper = this.apis[this.randomNumber(0, this.apis.length)];
console.log(wallpaper);
},
// Fetch random image from Flickr API
flickr() {
var popularTags = ['sunset','beach','water','sky','red','flower','nature','blue','night','white','tree','green','flowers','portrait','art','light','snow','dog','sun','clouds','cat','park','winter','landscape','street','summer','sea','city','trees','yellow','lake','christmas','people','bridge','family','bird','river','pink','house','car','food', 'bw','old','macro','music','new','moon','orange','garden','blackandwhite'];
var tag = popularTags[this.randomNumber(0, popularTags.length)];
return tag;
},
// Fetch random image from Desktopper.co API
desktopper() {
return 'desktoppr';
}
}
});
HTML:
<body>
<div id="app">
<div>
<div>
<img id="random" src="" />
</div>
<div>
<button v-on:click="requestWallpaper">New Wallpaper</button>
</div>
</div>
</div>
</body>