Question

这是我第一次使用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，这应该将按钮更改为Disabled，但不是。

希望有人可以抓住我的错误，因为这是我第一次使用Vue。

Answer 1

这是一种可以使它起作用的方法，其中包括需要在当前代码上进行改进的部分。

在您的方法下用app替换this，因为使用app会导致错误，因为它是undefined。如果要访问组件下的任何状态或方法，请使用this。
由于下一个和上一个按钮的状态是从幻灯片的currentNumber的值派生的，因此您可以在{{1}下定义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;
    }, 
  }
})

Answer 2

也许尝试将逻辑放入计算机中？

使用Vue.js：在没有“下一张”照片可用时，禁用图片幻灯片上的按钮

2 个答案: