How to inject an element?

[Zyme]

I have a component that I want to build a form.

So I use it like <form-builder></form-builder> in my code.

How would I inject components like <q-input> and <q-btn> to render depending on what data I pass to it?

So my code would be something like:

<template>
  <div>
    <form-builder data="data"></form-builder>
  </div>
</template>

... stuff here ...

data: {
  name: {
    type: 'input',
    label: 'Name'
  }.
  submit: {
    type: 'button',
    label: 'Submit'
  }
}

And from that it should convert the code to the elements:

<q-input v-model="name" stack-label="Name" />
<q-btn color="primary">Submit</q-btn>

How do I do this?

[jimmack1963]

This is a vue.js feature called dynamic components:

<template>
<div class=“app-body row”>
<template v-for="(child, index) in children">
<component :is=“child” :key=“child.name”></component>
</template>
</div>
</template>

https://forum.vuejs.org/t/any-way-to-dynamically-add-multiple-vue-components-within-a-parent-vue-component/8209

or

https://coligo.io/dynamic-components-in-vuejs/