I have a question and requirement that I would like to discuss. It involves dynamically rendering templates and data using components. The scenario is as follows:
The root Vue instance fetches data from the backend, and let's say the following data is returned:
[
{
/* This section will be passed 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 passed to a component */
type: 'lastSub',
templatestr: '<p> <more-vue-customized-component itsdata="xxx"></more-vue-customized-component> </p>',
data: [
datafordynamicComponent: xxxx
]
}
2. Which structure or architecture can we use to render the composition shown above using the provided data?
<root>
<FirstSub></FirstSub>
...
<lastSub></lastSub>
</root>