vuejs中如何在for循环遍历的时候，修改动态组件currentView值

Question

如何在for循环遍历的时候，修改动态组件currentView值

<template v-for="(index,value) in cmsColumnsData.column">
    <component  :index="index" :value="value" :is="currentView"></component>
</template>
    
// 组件 ad(广告)
var cmsAd = Vue.extend({
    template: '<div>111</div>',
})

// 子组件 - goods(商品)
var cmsGoods = Vue.extend({
    template: '<div>23452345</div>'
})

// 子组件 - nav(导航)
var cmsNav = Vue.extend({
    template: '<div>234534523452345</div>'
})


var displayVm = new Vue({
el: '.right-container',
data: {
    cmsColumnsData: cmsColumnsData,
    currentView: 'cms-ad'
},
components: {
    "cms-ad": cmsAd,
    "cms-goods": cmsGoods,
    "cms-nav": cmsNav,
    'cms-parent': cmsParent
}

http://jsbin.com/bafopunomi/edit?html,css,js,output

Answer 1

你想要的是动态渲染这些组件？

<div>
  <div v-for="view in views">
    <component :is="view"></component>
  </div>
</div>

new Vue({
el: '.right-container',
data: {
    views: ['cms-ad','cms-nav','cms-parent','cms-goods']
},
components: {
    "cms-ad": cmsAd,
    "cms-goods": cmsGoods,
    "cms-nav": cmsNav,
    'cms-parent': cmsParent
}