For today’s post, I wrote a pen where the goal was to take the latest photo posted to https://photos.jws.app/ and set it as the background image. In it, I used the blogger API to get a JSON object and I parsed content for the first href. I then pushed that into a second array and used the first array item as the background, using document.body.style.backgroundImage.
See the Pen
Auto-updating Background Image (using Vue.js and Axios) by Joe Steinbring (@steinbring)
on CodePen.
I wanted to give the user the ability to change the background, so I output “thumbnails” (they are just the same images with a limited width) of all the images and added v-on:click to each one so that you can switch. You’ll notice that when the user clicks an image, it changes the value of current Image to equal index. Vue watches the value of currentImage and changes the value of document.body.style.backgroundImage when it happens.
Vue watchers give you a lot of flexibility because you just need to change that index and vue does the rest. There is no need to add a bunch of functions to an onclick event.
Have a comment or question? Feel free to drop it in the comments, below.
[ Cover photo by Luke Chesser on Unsplash ]