Vue.js create dynamic AJAX response based multiple components - vuejs2

Question

I am trying to create an SPA using dynamic server response.
For e.g. data returned is:
components: [
{
name: "Parent1",
data: {...},
children: [
{
component: {
name: "Child1",
data: {...},
children: []
}
},
{
component: {
name: "Child2",
data: {...},
children: []
}
}
]
},
{
name: "Parent2",
data: {...},
children: [
{
component: {
name: "Child1",
data: {...},
children: []
}
}
]
}
]
What I would like to do is define parent components and children separately.
i.e. Components list:
- Parent : Common parent with data1 and data2 displayed, instantiates Children as needed
- Child1
- Child2
Anyone have any ideas for the best approach?

Answer 1

You may do like this:
Parent API URL: www.example.com/api/parent/parent_id (generally known as API endpoint)
Server Response:
{
data: {
type: "Parent",
id: "parent123",
name: "Parent 1",
children_ids: ["c1", "c2", "c3"]
},
included: [
{type: "Child", id: "c1", name: "Child 1", ...},
{type: "Child", id: "c2", name: "Child 2", ...},
{type: "Child", id: "c3", name: "Child 3", ...},
]
}
Note:
Every data item needs to have an ID. Your example does not mention ID anywhere.
This example roughly follows the guidelines in http://jsonapi.org/ but you are free to follow whatever works for you, as long as you document it for the team.
This example attempts to load the actual data in response.data object, and side-loads children data in response.included array, thus keeping parent and child separate. You need to handle this response convention in Vue.js, preferably using Vuex as the store.
If you intend to follow this example, you also need to make sure the child API endpoints are active and can be independently accessed. This is helpful if your Vue App is loaded directly with child URL.
Sample child API endpoint:
www.example.com/api/parent/parent_id/child/child_id (if child_id is NOT unique)
www.example.com/api/child/child_id (if child_id is unique)

Answer 2

Did you mean component with is?
<component :is="componentType"></component>
This is the dynamic components feature of Vue.js
A very simple example: http://codepen.io/CodinCat/pen/ZLjrRX?editors=1010
see the document here: https://v2.vuejs.org/v2/guide/components.html#Dynamic-Components