Javascript 使用v-for创建的项目之间的Vue.js转换

我正在使用vue克隆一个flash应用程序（），我需要在使用v-for创建的项目之间创建转换

我在App.vue上的不同组件之间进行了转换

但是，在Module1.vue中，我使用v-for生成幻灯片

是否可以为模块内生成的每个项目动态创建路由器链接，并相互转换

以下是迄今为止该项目的托管演示：

我目前的解决方案是将幻灯片包装在一个大的父幻灯片中，并将其作为旋转木马进行导航。不确定这是否是一个很好的优化解决方案，而且感觉不像vue的方式

我在尝试$emit返回App.vue时也遇到了麻烦，我可以使用以下方式将slidePosition作为道具传递给孩子：

在我的模块中，我尝试使用以下方法返回$emit：

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

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

开始
方法：{
增量：函数（）{
此值为0.slidePosition+=10
此.$emit（'增量'）
}
}

这是基于这个答案。使用路由器在幻灯片之间切换将是一个更整洁的解决方案

或者我甚至不需要使用路由器？我是否只使用过渡组？

---

基于此演示，我找到了一个非常简单的解决方案

我没有使用v-for，而是通过增加我的slidePosition来更改幻灯片内容，然后用它调用幻灯片对象中的每个项目。举个简单的例子，假设我的幻灯片对象是：

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

在数据中，我设置了

slidePosition:0

然后我可以使用按钮增加位置

Next

然后在我的方法中：

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

最后在我的模板中：

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

{{slides[slidePosition].title}