This is my initial experience with Vue. I am attempting to assemble a slideshow using an array of images. I have successfully managed to disable the "previous" button when the user reaches the beginning of the slideshow, but I am encountering difficulties in disabling the "next" button when at the last image of the presentation.
Below is the snippet of my code:
Vue.config.devtools = true
var app = new Vue({
el: '#app',
data: {
title: 'Photo of the day!',
description: '',
images: [
{
image: 'https://cdn.spacetelescope.org/archives/images/wallpaper2/heic1509a.jpg', date: '1/9/2019', title: 'Beautiful Milky Way'
},
{
image: 'https://img.purch.com/w/660/aHR0cDovL3d3dy5zcGFjZS5jb20vaW1hZ2VzL2kvMDAwLzA2MS8wNzUvb3JpZ2luYWwvY2hhbmRyYS1uZ2M2MzU3LWNvbXBvc2l0ZS5qcGc=', date: '1/10/2019', title: 'Amazing Whirlpool Galaxy'
},
{
image: 'https://icdn3.digitaltrends.com/image/space-engine-featured-510x0.jpg?ver=1', date: '1/11/2019', title: 'Wonderous Large Magellanic Cloud'
},
],
currentNumber: 0,
photosAvailable: true,
},
methods: {
next: function() {
app.currentNumber += 1;
if (app.currentNumber === app.images.length) {
console.log('SERGIO')
app.photosAvailable = false
return
}
},
previous: function() {
app.photosAvailable = true
return app.currentNumber -= 1
},
}
})<!DOCTYPE html>
<html>
<head>
<link href="./styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Anaheim" rel="stylesheet">
<meta charset="UTF-8">
<title>NASA Photo Of The Day</title>
</head>
<body>
<div id='app'>
<section class='hero'>
<h1 class='title'>{{ title }}</h1>
</section>
<section class='picture-area'>
<div class='info'>
<h2>{{ images[currentNumber].title }}</h2>
<p v-bind='description'>{{ description }}</p>
<img class='image-of-day' :src='images[currentNumber].image' />
<p class='date'>{{ images[currentNumber].date }}</p>
<button :disabled="!currentNumber" v-on:click="previous" class='backward'>previous</button>
<button :disabled="!photosAvailable" v-on:click="next" :class="{disabledButton: !photosAvailable}" class='forward'>next</button>
</div>
</section>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="26475e4f495566160817140816">[email protected]</a>/dist/axios.min.js"></script>
<script src='./index.js'></script>
</body>
</html>Observing my Vue devtools, I noticed that the photosAvailable flag does transition to false, which should render the button disabled. However, this functionality seems to be malfunctioning.
I hope there's someone out there who can pinpoint my mistake, considering it's my first dive into Vue development.