Vue.js transition between items created with v-for

I’m cloning a flash app (http://bqgh6e.axshare.com/module.html) using vue and I need to create transitions between items created with v-for.

I’ve got transitions working between different components on my App.vue https://github.com/alansutherland/BodyGuard/blob/master/src/App.vue

However, within Module1.vue I’m generating slides using v-for https://github.com/alansutherland/BodyGuard/blob/master/src/components/Module1.vue

Is it possible to dynamically create router links for each item generated within the module and transition to them from one another?

Here is a hosted demo of the project so far: https://bodyguard-9c7b0.firebaseapp.com/module-1

My current solution is to wrap the slides within a large parent and navigate them as a carousel. Not sure if this is a good solution for optimization and it doesn’t feel like the vue way to do things.

I’m also running in to trouble trying to $emit back to App.vue, I’m able to pass slidePosition as a prop to the child using:

<router-view :slidePosition="slidePosition" class="view"></router-view>

In my module I try to $emit back using this:

<span v-on:click="increment" v-on:increment="incrementPosition">Start</span> 

methods: {
    increment: function () {
      this.slidePosition += 10
      this.$emit('increment')
    }
  }

This is based off this SO answer vuejs update parent data from child component. Transitioning between slides using the router would be a far neater solution.

Or do I not even need to use the router? do I just use transition-groups? https://v2.vuejs.org/v2/guide/transitions.html#List-Transitions

Answer

I found a really simple solution based on this demo http://matthiashager.com/blog/image-slider-vuejs-tutorial

Rather than use v-for I just change the slide content by incrementing my slidePosition which I then use to call each item within my slide object. As a simple example, say my slides object was this:

slides: [
    {title: 'Slide One'},
    {title: 'Slide Two'},
    {title: 'Slide Three'},
    {title: 'Slide Four'}
  ]

and within data I’ve set slidePosition: 0

I can then increment the position using a button

<button v-on:click="incrementPosition">Next</button>

then within my methods:

incrementPosition: function () {
  this.slidePosition = this.slidePosition + 1
}

And finally in my template:

<h3>{{slides[slidePosition].title}}</h3>