I am currently utilizing Vue.js to create a user interface for my HTML5 game. I have a scenario where I want to define UI containers that essentially group other UI components and position them on the screen. Here's an example of what I'd like to achieve:
<ui-container>
<ui-component1></ui-component1>
<ui-component2></ui-component2>
<ui-component3></ui-component3>
</ui-container>
My challenge lies in dynamically adding and removing these components based on a data model representing the container's content. I aim to keep the ui-container generic so that I can append any Vue component to it without specifying the components in the template.
After researching, I came across an example demonstrating how to inject components dynamically: http://forum.vuejs.org/topic/349/injecting-components-to-the-dom. Although the data-driven version in the example was straightforward, it utilized v-for for the tag, necessitating prior knowledge of the child component type.
Therefore, my question is, how can I adapt this example to work with any component dynamically? Should my data model include the component type or tag name, which will be interpolated in v-for? Or does Vue.js offer an existing mechanism to cater to such requirements?