Javascript Vue.js：如何在Vue旋转木马中更改幻灯片时重新运行代码

我是vue.js的新手，在这里摸索着，如果我的条款不正确，请原谅。我正在创建一个需要符合ADA的触摸屏应用程序（只有屏幕的底部可以访问，所以我必须使用按钮进行交互）

我有一个带有旋转木马的父组件，它创建了一系列幻灯片，从我的子组件中提取数据

父组件HTML

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

在我的子组件中，我从我的数据和箭头按钮中提取了bio copy，这些按钮允许您滚动文本。有一个外部容器和一个内部容器允许滚动，并根据容器中内容的高度确定箭头何时禁用或不禁用

子组件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>

---

好的，这是一个好的开始。以下是我想尝试的几件事：

将当前装入的

中的代码移动到名为
calculateHeight
的新方法或类似方法

从

向上滚动

和

向下滚动

方法调用该方法

因此，您的最终代码如下所示：

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')
    }
  }
}

---

好的，这是一个好的开始。以下是我想尝试的几件事：

将当前装入的

中的代码移动到名为
calculateHeight
的新方法或类似方法

从

向上滚动

和

向下滚动

方法调用该方法

因此，您的最终代码如下所示：

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')
    }
  }
}

---

因此，一旦它计算了高度，我需要它禁用箭头按钮（如果它位于容器顶部），并禁用底部箭头（如果它位于容器底部）。我目前使用绑定样式“active”来实现这一点。随着calculateHeight被添加到按钮函数本身，我能做到这一点吗？抱歉，我意识到我在问题中没有解释是的，这不应该改变你的任何东西，你可以禁用和启用按钮。因此，一旦它计算了高度，我需要它禁用箭头按钮（如果它位于容器顶部），并禁用底部箭头（如果它位于容器底部）。我目前使用绑定样式“active”来实现这一点。随着calculateHeight被添加到按钮函数本身，我能做到这一点吗？对不起，我意识到我在问题中没有解释是的，你禁用和启用按钮不会改变任何事情。

{
  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
    }
  }
})

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')
    }
  }
}