How to change slide set in vue-slick?

Question

Slick

I'm using the vue-slick carousel, which is initialized at startup. There is an "add slide" button, after which you need to "restart" the slider. But nowhere is it said how to do it. I try to use in the method of adding a slide this.$refs.slick.$reSlick(), nothing happens. How to update the slider?

Answer 1

I'm using vue-slick carousel...

I take it you are talking about this one ?

There is an "add slide" button, after which you need to "restart" the slider. <...> I try to use in the method of adding a slide this.$refs.slick.$reSlick(), nothing happens.

Which is not surprising - inside reSlick, the carousel is destroyed and immediately created. When destroyed, all internal markup except for images is cut out, while slick keeps the images in a separate div - that is, the newly added slide falls into the root element of slick and is immediately deleted.
So the order of actions when changing a set of slides should look something like this - destroy the carousel, change the markup, create the carousel. That is, the call $refs.slick.destroy; then changing the data on which the slide layout is built; and finally, the call $refs.slick.createwrapped in $nextTick.
I don’t see much point in doing such nonsense, it’s better to destroy and re-create an instance of the component itself. To do this, assign it a key, whose value will depend on the set of data on the basis of which the slide layout is built. For example .