如何在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
你想要的是动态渲染这些组件?
<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
}