Vue.js 使用 v-for 创建的项目之间的过渡

Question

我正在使用 vue 克隆一个 Flash 应用程序 (http://bqgh6e.axshare.com/module.html)，我需要在使用 v-for 创建的项目之间创建转换。

我的 App.vue https://github.com/alansutherland/BodyGuard/blob/master/src/App.vue

上的不同组件之间进行了转换

但是，在 Module1.vue 中，我使用 v-for https://github.com/alansutherland/BodyGuard/blob/master/src/components/Module1.vue

生成幻灯片

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

到目前为止，这是该项目的托管演示： https://bodyguard-9c7b0.firebaseapp.com/module-1

我目前的解决方案是将幻灯片包裹在一个大 parent 中，并将它们作为轮播进行导航。不确定这是否是一个很好的优化解决方案，而且感觉不像是 vue 做事的方式。

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

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

在我的模块中，我尝试使用这个 $emit 返回：

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

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

这是基于这个 SO 答案。使用路由器在幻灯片之间过渡将是一个更简洁的解决方案。

或者我什至不需要使用路由器？我只使用 transition-groups 吗？ https://vuejs.org/v2/guide/transitions.html#List-Transitions

Answer 1

我根据这个演示找到了一个非常简单的解决方案 http://matthiashager.com/blog/image-slider-vuejs-tutorial

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

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

在我设置的数据中 slidePosition: 0

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

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

然后在我的方法中：

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

最后在我的模板中：

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

Vue.js 使用 v-for 创建的项目之间的过渡

Vue.js transition between items created with v-for

javascript

transitions

vue-router

vuejs2