How can I reinit slider?

viktorlarsson / vue-tiny-slider

Vanilla javascript slider for all purposes created by ganlanyuan in Vue.

MIT License

135 stars 51 forks source link

How can I reinit slider? #24

Closed Suruat closed 5 years ago

Suruat commented 6 years ago

I have computed property that on condition filtering slides, but slider do not rerender. I've tried to make it work with this.$refs.carousel.slider.destroy() and this.$refs.carousel.slider.rebuild() after computed property revaluated, but it did not help. Slider rebuilds with initial slides.

I've also tried to make it work with $forceUpdate of slider... no luck either.

Maybe you know a proper way to do such changes? Thank you in advance for your response.

viktorlarsson commented 6 years ago

@rymdkapten Didn't we do this in our project?

TitanFighter commented 5 years ago

Confirm. Initially I expected that props are reactive, but they are not. Then I tried different ways to rerender slider with updated options, but no luck.

TitanFighter commented 5 years ago

It seems rebuild() does not work as a standalone method, it just return a new instance of slider -> Docs.

rebuild Rebuild the slider after destroy.

slider = slider.rebuild(); // this method returns a new slider Object with the same options with the original slider

Suruat commented 5 years ago

Yeah, that is a problem. As I worked with your plugin I discovered that all problems are coming from original tiny-slider. It just doesn't designed with reactivity in mind. Because of that I will probably create slider plugin for Vue from scratch when have free time. So don't bother with this topic and thank you :)

TitanFighter commented 5 years ago

@Suruat

This is no my plugin :)
You can try vue-awesome-swiper, but this component has 2 bugs which I found:
- It seems that there could be just 1 instance at any time, which was not ok for me, because I used this component inside different tabs (if more than 1 instance -> it stops working properly).
- It has a conflict with vue-smooth-dnd.

So, if the above mentioned problems do not influence you, you can try it :)

marekalgoud commented 3 years ago

Hello,

This issue is old and closed but for those who are facing the same issue, I post my solution :

I had a data loading in my component.
In my template, I had a v-if=!loading around the vue-tiny-slider component
In the watcher, I add the following code (medias is my dynamic list of slides) :
```
watch: {
medias () {
  this.loading = true
  setTimeout(() => {
    this.loading = false
  }, 0)
}
}
```
=> This way, each time the medias is updated, the vue-tiny-slider is removed from the dom and reinserted with the new slides ! Works like a charm in my case (small sliders).