用v-for創建的項目之間的Vue.js轉換

我使用vue克隆flash應用程序（http://bqgh6e.axshare.com/module.html），我需要在使用v-for創建的項目之間創建轉換。用v-for創建的項目之間的Vue.js轉換

我已經在我的App.vue轉變了不同組件之間的工作https://github.com/alansutherland/BodyGuard/blob/master/src/App.vue

然而，內Module1.vue我生成使用幻燈片V-的https://github.com/alansutherland/BodyGuard/blob/master/src/components/Module1.vue

是否可以動態地創建路由器在模塊中生成的每個項目的鏈接並從另一個轉換到它們？

下面是該項目的託管演示至今： https://bodyguard-9c7b0.firebaseapp.com/module-1

我目前的解決辦法是換一個大的母內的幻燈片，並瀏覽他們的傳送帶。不知道這是否是一種優化的優化解決方案，它並不像做事的方式。

我也麻煩運行在試圖$發出回App.vue，我可以在使用通過slidePosition爲道具，以孩子：

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

在我的模塊I嘗試$使用此回發：

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

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

這是基於這個SO回答vuejs update parent data from child component。在使用路由器的幻燈片之間進行轉換將是一個更好的解決方案。

或者我甚至不需要使用路由器？我只是使用轉換組？ https://vuejs.org/v2/guide/transitions.html#List-Transitions

來源

2017-04-25 Pixelomo

我發現在此基礎上演示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>

來源

2017-04-28 11:24:39 Pixelomo

用v-for創建的項目之間的Vue.js轉換

回答

相關問題