vuejs app architecture for dynamic template with dynamic data and dynamic component type issue

Sorry for posting ‘issue’ here. I have posted question on vue forum and stackoverflow but with no feedback. I am now developing an app with vuejs and the architecture is important from begining. Here is the link: http://forum.vuejs.org/topic/4604/how-to-address-component-with-dynamic-template-and-its-relative-data http://stackoverflow.com/questions/38342241/vuejs-better-way-to-address-component-with-dynamic-template-and-its-relative-dat I copy here for kind proposal. It is an architecture issue. I have following question/requirement, if anyone has good idea, please kindly post for discussion It is for the dynamically rendering for dynamical template and data use component The scenario is as following: 1.root vue instance fetch data from backend, say following data returned:

[
{
    /* this section will be fed to a component */
    type: 'FirstSub',
    templatestr: '<div> <more-vue-customized-component itsdata="xxx"></more-vue-customized-component>  </div>',
    data: [
        datafordynamicComponent: xxxx
    ]

},
...
{
    /* this section will be fed to a component */
    type: 'lastSub',
    templatestr: '<p> <more-vue-customized-component itsdata="xxx"></more-vue-customized-component>  </p>',
    data: [
        datafordynamicComponent: xxxx
    ]

}

1. Which structure/architecture we can use to render as following composition using above data?

<root>
<FirstSub></FirstSub>
...
<lastSub></lastSub>
</root>

[terrydai]

Here is a related issue with feature request https://github.com/vuejs/vue/issues/2114.

I have wrote a component-proxy to resolve it which may do some help to you.

import _ from 'lodash'
import Vue from 'vue'


export default {
  props: ['name', 'props', 'value'],
  template:  '',
  created(){
    let props = []
    if(this.props ){
      // apply properties to component data
      _.forOwn(this.props, (value, key)=>{
        // console.debug( key,  this[key])
        props.push(`:${_.kebabCase(key)}="props['${key}']"`)
      })
    }

    // console.debug('component proxy', props.join(' '))
    this.$options.template = `<component :is="name" ${props.join(' ')} :value.sync="value"></component>`
  },
}

About usage:

.ui.form
    .field(v-for="column in table.columns")
      label {{column.title}}
      component-proxy(:name="column.editor.type",:props="column.editor.propsData",:value.sync="column.name")

[fnlctrl]

Does this solve your problem?

<component v-for="item in yourComponentsFromAPI" :is="item.name" :some-prop="item.data">
</component>