Использование Vue.js: отключение кнопки на слайд-шоу, когда нет «следующей» фотографии

1

Я впервые использую 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/axios@0.12.0/dist/axios.min.js"></script>
  <script src='./index.js'></script>
  </body>
</html>

В моем Vue devtools я вижу, что photosAvailable превращается в false, что должно изменить кнопку на отключенную, но это не так.

Надеюсь, что кто-то может поймать мою ошибку, так как я впервые использую Vue.

Теги:
vue.js

2 ответа

1
Лучший ответ

Вот один из подходов, который вы можете использовать, чтобы заставить его работать, включая части, которые вы должны улучшить в своем текущем коде.

  • Замените 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/axios@0.12.0/dist/axios.min.js"></script>
  <script src='./index.js'></script>
  </body>
</html>
0

Может быть, попробовать поставить логику в вычислении?

  • 0
    Я не совсем уверен, что вы имеете в виду. Можете ли вы предоставить указатель?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню