javascript - 在 Vue Slider 中使用动态值递增/递减

Question

我正在使用Vue Slider，我想将滑块增加到下一个索引，依此类推。目前，它以 1 递增，因为 1 是在 setIndex 函数的参数中硬编码的。如果我传递一个变量，它会导致错误。我相信函数 setIndex 不接受变量名。

<button @click="setIndex('m-slider', 1)">+</button>

setIndex(name, num) {
  let slider = this.$refs[name];
  slider.setIndex(num);
}

如何使按钮单击增加/减少每次单击到滑块和硬编码值中的下一个索引？

标签： javascriptvue.js

Answer 1

好吧，您需要引用旧的/以前的索引来增加。

<button @click="goToSlide('m-slider')">+</button>
<button @click="goToSlide('m-slider', false)">-</button>

data() {
  return {
    slides: []
  }
},

methods: {
  goToSlide(name, next = true) {
    let slider = this.$refs[name];
    let offset, currentIndex = slider.getIndex();

    if (next) {
      offset = Math.min(this.slides.length - 1, currentIndex + 1);
    } 
    else {
      offset = Math.max(0, currentIndex - 1);
    }

    slider.setIndex(offset);
  }
}