javascript - Vue.js:每当您更改 vue 轮播中的幻灯片时如何重新运行代码

Question

我对 vue.js 非常陌生，并且摸索着使用它，如果我的条款不正确，请原谅我。我正在创建一个需要符合 ADA 标准的触摸屏应用程序(只有屏幕的底部可以访问，所以我必须使用按钮进行交互)。

我有一个带有轮播的父组件，该轮播创建幻灯片数组，从子组件中提取数据。

父组件HTML

<carousel :navigateTo="selectedListIndex" @pageChange="OnPageChange">
  <slide v-for="(member, index) in selectedList" :key="index">
     <MemberBioPage :member="member"/>
  </slide>
</carousel>

父组件脚本:

export default {
  data () {
    return {
      currentPage: 0
    }
  },
  components: {
    MemberBioPage,
    Carousel,
    Slide
  },
  computed: {
    selectedList () {
      return this.$store.state.selectedList
    },
    selectedListIndex () {
      return this.$store.state.selectedListIndex
    }
  },
  methods: {
    OnPageChange (newPageIndex) {
      console.log(newPageIndex)
      this.currentPage = newPageIndex
    }
  }
}

在我的子组件中，我从数据中提取了生物副本，并且箭头按钮允许您滚动文本。有一个外部容器和一个内部容器允许滚动，并根据内容在容器中占据的高度来确定箭头何时禁用。

子组件 HTML:

<div class="member-bio-page">
  <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'}">
         <h1>{{ member.name }}</h1>
         <div class="description-container">
            <div class="para">
              <p v-html="member.shortBio"></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 > newHeight }" @click="scrollDown" src="@/assets/arrow-down.png">
       </div>
     </div>
   </div>
</div>

子组件脚本:

<script>
export default {
  props: [
    'member', 'currentPage'
  ],
  data () {
    return {
      scrollVar: 0,
      outerHeight: 0,
      innerHeight: 0,
      newHeight: -10
    }
  },
  mounted () {
    this.outerHeight = document.getElementsByClassName('bio-container')[0].clientHeight
    this.innerHeight = document.getElementsByClassName('inner-scroll')[0].clientHeight
    this.newHeight = this.outerHeight - this.innerHeight
    return this.newHeight
  },
  methods: {
    scrollUp () {
      console.log(this.scrollVar)
      this.scrollVar += 40
    },
    scrollDown () {
      console.log(this.scrollVar)
      this.scrollVar -= 40
    },
    showVideo () {
      this.$emit('showContent')
    }
  }
}
</script>

我能够获取我查看的第一个生物的高度，但在页面更改时它会保持设置的高度。我基本上希望 Mounted 中的代码能够根据我所在幻灯片的索引重新运行。我需要“newHeight”来更新每个页面的更改。我尝试使用 props 从父组件中获取“currentPage”，但它获取的是未定义的。

这是我的数据的全部片段，向您展示我当前拥有的数据:

{
  index: 12,
  name: 'Name of Person',
  carouselImage: require('@/assets/carousel-images/image.jpg'),
  imgSrc: require('@/assets/bio-page-image-placeholder.jpg'),
  shortBio: '<p>a bunch of text being pulled</p>',
  pin: require('@/assets/image-of-pin.png')
}

这也是我的商店，以防万一

const store = new Vuex.Store({
  state: {
    foundersList: founders,
    chairmanList: chairmans,
    selectedList: founders,
    selectedListIndex: -1
  },
  mutations: {
    setSelectedState (state, list) {
      state.selectedList = list
    },
    setSelectedListIndex (state, idx) {
      state.selectedListIndex = idx
    }
  }
})

Answer 1

好吧，这是一个好的开始。以下是我会尝试的一些事情:

1. 将当前 mounted 中的代码移至名为 calculateHeight 或类似内容的新方法。

2. 从 scrollUp 和 scrollDown 方法中调用该方法。

所以你的最终代码看起来像这样:

export default {
  props: [
    'member', 'currentPage'
  ],
  data () {
    return {
      scrollVar: 0,
      outerHeight: 0,
      innerHeight: 0,
      newHeight: -10
    }
  },
  mounted () {
    this.calculateHeight();
  },
  methods: {
    calculateHeight() {
      this.outerHeight = document.getElementsByClassName('bio-container')[0].clientHeight
      this.innerHeight = document.getElementsByClassName('inner-scroll')[0].clientHeight
      this.newHeight = this.outerHeight - this.innerHeight
    },
    scrollUp () {
      console.log(this.scrollVar)
      this.scrollVar += 40
      this.calculateHeight()
    },
    scrollDown () {
      console.log(this.scrollVar)
      this.scrollVar -= 40
      this.calculateHeight()
    },
    showVideo () {
      this.$emit('showContent')
    }
  }
}