javascript - VueJS random number gets generated only once -
i want make simple vuejs app ability use multiple apis, grab image , display user. first try vue after watching videos of course, please don't hate me if dont use vuejs function use pure js.
i want user clicks button, request image api. works picks api randomly, flickr api need specify tag (which saved in array, picked randomly too). picks tag once , every time call function again it's same tag! means function gets executed once page reloaded.
why , how can fix it? in advance.
my code far
var vm = new vue({ el: '#app', data() { return { // data apis: [this.flickr(), this.desktopper()], wallpaper: '', wallpapers: [], screenwidth: window.screen.width, screenheight: window.screen.height, } }, methods: { // random function randomnumber(min, max) { return math.floor(math.random() * (max - min) + min); }, // main function, calls api , should image source requestwallpaper() { var wallpaper = this.apis[ this.randomnumber(0, this.apis.length) ]; console.log(wallpaper); }, // flickr api request random image flickr() { // popular tags of time on flickr (tags needed request images)... 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']; // grab random tag var tag = populartags[ this.randomnumber(0, populartags.length) ]; return tag; }, // desktopper.co api request random image 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>
the problem you're apis array.
apis: [this.flickr(), this.desktopper()], you're calling both flickr() , desktopper() methods. that's parenthesis () means, they're can pass arguments method. instead, should exclude parenthesis you're storing reference each method.
apis: [this.flickr, this.desktopper], then, when call requestwallpaper() you'll need first random api, , then call reference.
// reference random api var api = this.apis[ this.randomnumber(0, this.apis.length) ]; // call reference, parenthesis , wallpaper result var wallpaper = api() 
Comments
Post a Comment