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

【问题标题】：Incrementing/decrement with dynamic value in Vue Slider在 Vue Slider 中使用动态值递增/递减
【发布时间】：2019-07-07 04:15:16
【问题描述】：

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

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

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

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

【问题讨论】：

您是否在vue-slider 元素上添加了ref="m-slider"？
@jom 是的。它有效，但仅递增到下一个索引。

标签： javascript vue.js

【解决方案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);
  }
}

【讨论】：

太棒了。当我递减（ - 1）时，它不起作用。它抛出错误。这是为什么呢？
@Nofel 应该的，你能发布你更新的代码吗？
` goToPrevSlide(name) { let slider = this.$refs[name]; slider.setIndex(slider.getIndex() - 1); }`
我做了，不知道为什么代码格式化不起作用。
@Nofel 嗯，这真的应该工作，你能放一个调试器并检查索引吗？我编辑了我的答案来处理增量和减量。