vueで作成したアイテム間のVue.jsの遷移

Question

vueを使用してフラッシュアプ​​リケーション（http://bqgh6e.axshare.com/module.html）を複製しています.v-forで作成したアイテム間にトランジションを作成する必要があります。

私はしかし、Module1.vue以内に私はV-ため https://github.com/alansutherland/BodyGuard/blob/master/src/components/Module1.vue

を使用してスライドを作成していますが、動的にルータを作成することは可能です私App.vue https://github.com/alansutherland/BodyGuard/blob/master/src/App.vue

上の異なるコンポーネント間の作業の遷移を持って

モジュール内で生成された各アイテムのリンクと、それらのモジュール間の遷移ここで

は、これまでのプロジェクトのホスティングされたデモである： https://bodyguard-9c7b0.firebaseapp.com/module-1

私の現在のソリューションは、大規模な親の中にスライドをラップし、カルーセルとしてそれらをナビゲートすることです。これが最適化のための良い解決策であり、物事を行うためのvue方法のように感じないかどうかは分かりません。私のモジュールIで

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

：

私も$しようとしてトラブルに実行していますが、私が使用して子供に小道具としてslidePositionに合格することができるよ、App.vueに戻っ発しますこれは、これはSO vuejs update parent data from child componentに答えるオフに基づいています

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

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

：これを使用してバック発する$にしてみてください。ルータを使用してスライド間を移行することは、はるかにきめ細かな解決策になります。

ルータを使用する必要はありませんか？トランジショングループを使用するだけですか？ https://vuejs.org/v2/guide/transitions.html#List-Transitions

Answer 1

が、私はこのデモではなくhttp://matthiashager.com/blog/image-slider-vuejs-tutorial

に基づいて実際に簡単な解決策を見つけた使用のV-のために、私はちょうど私がその後、私のスライドオブジェクト内の各項目を呼び出すために使用私の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>