Я впервые использую Vue. Я пытаюсь создать слайд-шоу из массива изображений. Я могу отключить мою "предыдущую" кнопку, когда пользователь находится в начале слайд-шоу, но не могу отключить мою "следующую" кнопку, когда на последнем изображении слайд-шоу.
Вот мой код:
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/[email protected]/dist/axios.min.js"></script>
<script src='./index.js'></script>
</body>
</html>
В моем Vue devtools я вижу, что photosAvailable превращается в false, что должно изменить кнопку на отключенную, но это не так.
Надеюсь, что кто-то может поймать мою ошибку, так как я впервые использую Vue.
Вот один из подходов, который вы можете использовать, чтобы заставить его работать, включая части, которые вы должны улучшить в своем текущем коде.
Замените app
this
в ваших методах, так как использование app
вызовет ошибку, поскольку оно undefined
. Используйте this
если вы хотите получить доступ к любому состоянию или методу вашего компонента.
Поскольку статус следующих и предыдущих кнопки выводятся из значения currentNumber
слайда, вы можете определить isPrevPhotoAvailable
и isNextPhotoAvailable
методы под computed
свойством компонента. При этом вы можете удалить isPhotosAvailable
из вашего штата.
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
},
computed: {
isNextPhotoAvailable: function() {
return this.currentNumber + 1 !== this.images.length;
},
isPrevPhotoAvailable: function() {
return this.currentNumber - 1 !== -1;
}
},
methods: {
next: function() {
this.currentNumber += 1;
},
previous: function() {
return this.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="!isPrevPhotoAvailable" v-on:click="previous" class='backward'>previous</button>
<button :disabled="!isNextPhotoAvailable" v-on:click="next" :class="{disabledButton: !isNextPhotoAvailable}" class='forward'>next</button>
</div>
</section>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script>
<script src='./index.js'></script>
</body>
</html>
Может быть, попробовать поставить логику в вычислении?