Question

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

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

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

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

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

在Vue Slider中以动态值递增/递减

1 个答案: