Dynamically add slides in the middle of a glide produce strange result

[vcastro45]

If I have a glide like this (where slides is an array of 3 elements):

<vue-glide>
    <vue-glide-slide v-for="(slide, i) of slides" :key="i">
        Heyy, I am slide { i }
    </vue-glide-slide>
</vue-glide>

In the rendered HTML, each slide (.glide__slide) has a data-glide-index attribute. I this case, each data-glide-index is respectively 0, 1 and 2.

but now, if I create a button who adds an element in the middle of my list (for example between index 1 and 2), the data-glide-index of each slide will be respectively 0, 1, 3, 2.

By the way, the display will be broken and I will not be able to focus the new slide.

[vcastro45]

I found a work around:

<template>
<vue-glide ref="glide">
    <vue-glide-slide v-for="(slide, i) of slides" :key="i">
        Heyy, I am slide { i }
    </vue-glide-slide>
</vue-glide>
</template>

@Component({
  components: {
    [Glide.name]: Glide,
    [GlideSlide.name]: GlideSlide
  }
})
export default class SlidesComponent extends Vue {
    slides = [{}, {}, {}]
    addSlide () {
        const glide = this.$refs.glide
        this.slides.push({})
        glide.glide.destroy()
        this.$nextTick(() => {
          glide.init()
        })
    }
}

But it still glitch a little bit (and it's not very nice if you want to stay focus on the same slide after adding the new slide)

[antonreshetov]

After add new slide into array slides between index 1 and 2, data-glide-index of each slide will be respectively 0, 1, 2, 3 not 0, 1, 3, 2.

Example https://codesandbox.io/s/n722774xl

[vcastro45]

@antonreshetov My real case of use is a little more complex and when I wrote my first message I guessed that the result will be the same... My bad, sorry.

The real case look like this: https://codesandbox.io/s/kovjkr4m67

[antonreshetov]

@vcastro45 Because you have manually added an item to the slide. The other of the slides are rendered through a loop from the array in which you add a new item.

[antonreshetov]

@vcastro45 If you need reinit, it can be done without calling glide methods. You can add just a unique key for vue-glide, for example it can be length of array, to prevent reuse of the vue component

<template>
<vue-glide ref="glide" :key="slides.length">
    <vue-glide-slide v-for="(slide, i) of slides" :key="i">
        Heyy, I am slide { i }
    </vue-glide-slide>
</vue-glide>
</template>
``

[antonreshetov]

@vcastro45 Does the problem still exist?

[vcastro45]

@antonreshetov In my exemple, it still bug but with the key on the vue-glide it works fine

[antonreshetov]

@vcastro45 then I will close this issue if you don't mind