CODEWITHSUNDEEP
javascriptvue.js
localhost
localhost

Reputation: 871

Incrementing/decrement with dynamic value in Vue Slider

I am using Vue Slider and I want to increase the slider to the next index and so on. Currently, it increments by 1, as 1 is hardcoded in the parameters of the setIndex Function. If I pass a variable, it causes an error. I believe the function setIndex doesn't accept a variable name. 

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

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

How Can I make the button click increment/decrement to every click to next index in the slider and hardcode value?

Upvotes: 0

Views: 480

Answers (1)

Yom T.
Yom T.

Reputation: 9200

Well, you need to have a reference to the old/previous index to increment from.

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

Upvotes: 1

Related Questions