Vue.js：Vue-Carousel在点击时跳到数组中的最后一项

如何解决Vue.js：Vue-Carousel在点击时跳到数组中的最后一项

我目前正在开发一个涉及滚动浏览来自两个不同列表的成员的应用程序。单击一个后，您将看到他们的图像和简历。我们添加了向上和向下箭头以滚动浏览他们的传记，但是当我单击向下箭头时，轮播幻灯片上的活动类似乎现在跳到数组中的最后一个成员，但仍显示我已经在其中的成员。此外，加入会员后我无法来回滑动（这是我以前可以做的事情。）我知道这可能不是最好的描述，并且我只能显示太多代码无法显示整个应用程序。

我还想指出，如果刷新页面，一切都会按预期进行。这是否意味着未正确初始化？

这是我正在谈论的页面的特定代码：

<template>
  <div class="member-info-carousel">
    <div class="header">
      <h2 v-if="founderChairman === true">Member List One</h2>
      <h2 v-else>Member List Two</h2>
      <img src="../assets/logo.png" alt="logo" />
    </div>
    <carousel :minSwipedistance="384" :perPage="1" :paginationEnabled="false" :navigationEnabled="true" navigationNextLabel="<i>NEXT</i>"
  navigationPrevLabel="<i>BACK</i>" :navigateto="selectedListIndex" @pagechange="OnPageChange">
      <slide v-for="(member,index) in selectedList" :key="index">
        <div class="member-bio-page" :member="member" v-on:showContent="showContent">
          <div class="bio">
            <div class="portrait-image">
                <img :src="member.imgSrc" />
            </div>
            <div class="bio-container">
              <div class="inner-scroll" v-bind:style="{top: scrollVar + 'px'}">
                <div class="english"></div>
                <div class="pin-name">
                  <img :src="member.pin" />
                  <h1>{{ member.name }}</h1>
                </div>
                <div class="description-container">
                  <div class="para">
                    <p class="quote" v-html="member.quote"></p>
                    <p v-html="member.bio"></p>
                    <div class="spanish"></div>
                    <p class="quote" v-html="member.spanishQuote"></p>
                    <p v-html="member.spanishBio"></p>
                  </div>
                </div>
              </div>
            </div>
            <div class="scroll-buttons">
              <div>
                <!-- set the class of active is the scroll variable is less than 0-->
                <img class="btn-scroll" v-bind:class="{ 'active': scrollVar < 0 }" @click="scrollUp" src="@/assets/arrow-up.png">
              </div>
              <div>
                <!-- set the class of active is the scroll variable is greater than the height of the scrollable inner container-->
                <img class="btn-scroll" v-bind:class="{ 'active': scrollVar > pageChangeHeight }" @click="scrollDown" src="@/assets/arrow-down.png">
              </div>
            </div>
            <div class="eng-span">
              <a href="javascript:" class="english" @click="toEnglish">English</a>
              <a href="javascript:" class="spanish" @click="toSpanish">Español</a>
            </div>
          </div>
          <div class="play-button">
            <!-- if the array members has a property of video,then the play button will show on the slide. If not it will not show the image -->
            <img v-if="member.hasOwnProperty('video')" @click="showContent" src="@/assets/play-button.png">
          </div>
        </div>
        <!-- <MemberBioPage :member="member" v-on:showContent="showContent"/> -->
      </slide>
    </carousel>
    <modal name="video-modal"
           :width="1706"
           :height="960">
      <video width="1706" height="960" :src="(selectedList && selectedList[this.currentPage]) ? selectedList[this.currentPage].video : ''" autoplay />
    </modal>
    <div class="footer-controls">

      <div class="footer-bar">
          <p>Tap Back or Next to view additional profiles.</p>
          <p>Tap the arrows to scroll text up or down.</p>
      </div>
      <div class="nav-container">
        <img class="nav-bubble" src="@/assets/navigation-bubble-bio-page.png" alt="An image where the back,next and close button sit" />
      </div>

      <button class="close-button" @click="closeInfo">
        <img src="@/assets/x-close-button.png" />
        CLOSE
      </button>
    </div>
  </div>
</template>

<script>
import { Carousel,Slide } from 'vue-carousel'

export default {
  data () {
    return {
      currentPage: 0,pageChangeHeight: -10,scrollVar: 0
    }
  },components: {
    // MemberBioPage,Carousel,Slide
  },mounted () {
    this.enableArrows()
  },updated () {
    this.enableArrows()
  },computed: {
    selectedList () {
      return this.$store.state.selectedList
    },selectedListIndex () {
      return this.$store.state.selectedListIndex
    },founderChairman () {
      return this.$store.state.founderChairman
    }
  },methods: {
    enableArrows () {
      var outerHeight
      var innerHeight
      if (document.querySelectorAll('.VueCarousel-slide-active').length > 0) {
        outerHeight = document.querySelectorAll('.VueCarousel-slide-active .bio-container')[0].clientHeight
        innerHeight = document.querySelectorAll('.VueCarousel-slide-active .inner-scroll')[0].clientHeight
      } else {
        outerHeight = document.querySelectorAll('.VueCarousel-slide .bio-container')[0].clientHeight
        innerHeight = document.querySelectorAll('.VueCarousel-slide .inner-scroll')[0].clientHeight
      }
      this.pageChangeHeight = outerHeight - innerHeight
      return this.pageChangeHeight
    },scrollUp () {
      this.scrollVar += 40
      console.log(this.scrollVar += 40)
    },scrollDown () {
      this.scrollVar -= 40
      console.log(this.scrollVar)
    },OnPageChange (newPageIndex) {
      this.scrollVar = 0
      this.currentPage = newPageIndex
      this.pageChangeHeight = -10
    },closeInfo () {
      if (this.$store.state.selectedList === this.$store.state.foundersList) {
        this.$store.commit('setSelectedState',this.$store.state.foundersList)
        this.$router.push({ name: 'Carousel' })
      } else if (this.$store.state.selectedList === this.$store.state.chairmanList) {
        this.$store.commit('setSelectedState',this.$store.state.chairmanList)
        this.$router.push({ name: 'Carousel' })
      }
    },showContent () {
      this.$modal.show('video-modal')
    },toEnglish () {
      this.scrollVar = 0
    },toSpanish () {
      var spanishPos
      if (document.querySelectorAll('.VueCarousel-slide-active').length > 0) {
        spanishPos = document.querySelectorAll('.VueCarousel-slide-active .spanish')[0].offsetTop
      } else {
        spanishPos = document.querySelectorAll('.VueCarousel-slide .spanish')[0].offsetTop
      }
      this.scrollVar = -spanishPos
    }
  }
}
</script>

这是我的商店索引文件：

import Vue from 'vue'
import Vuex from 'vuex'
import chairmans from '@/data/chairmans-club'
import founders from '@/data/founders-circle'
import memoriam from '@/data/in-memoriam'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    finishedLoading: false,transitioning: false,foundersList: founders,chairmanList: chairmans,selectedList: founders,selectedListIndex: -1,founderChairman: true,inMemoriam: memoriam,idleTimer: {
      id: null,duration: 1
    },idleTimeoutModal: {
      show: false,duration: 1
    }
  },mutations: {
    setSelectedState (state,list) {
      state.selectedList = list
    },setSelectedListIndex (state,idx) {
      state.selectedListIndex = idx
    },showIdleTimeoutModal (state,value) {
      state.idleTimeoutModal.show = value
    },founderChairmanClicked (state,data) {
      state.founderChairman = data
    },setInMemoriam (state,content) {
      state.inMemoriam = content
    }
  },actions: {
    restartIdleTimer ({ state,commit }) {
      clearTimeout(state.idleTimer.id)

      state.idleTimer.id = setTimeout(() => {
        commit('showIdleTimeoutModal',true)
      },state.idleTimer.duration * 1000)
    },stopIdleTimer ({ state }) {
      clearTimeout(state.idleTimer.id)
    }
  }
})

export default store

以及我要提取的数据示例：

const event = [
  {
    index: 0,name: 'Member Name',carouselImage: require('@/assets/carousel-images/image.jpg'),drawerImage: require('@/assets/drawer-images/drawerimage.jpg'),imgSrc: require('@/assets/bio-images/bioimage.jpg'),quote: '“quote.”',spanishQuote: `“spanish quote.”`,bio: '<p>bio copy here</p>',spanishBio: '<p>spanish bio copy</p>',pin: require('@/assets/pin.png')
  }
]

export default event