title: Return a custom component from a method dynamically
body: <pre><code>export default {
      components: {
          'def-input': TextField,
          'def-select': Select,
          'def-button': Button
      },
      props: {
          'title': String,
          'fields': Array,
          'btnAction': Object
      },
      data: function () {
          return {
              arrElem: []
          }
      },
      template: `
          &lt;form @submit.prevent class=&quot;ui-form&quot;&gt;
              &lt;div class=&quot;uif-title&quot;&gt;
                  &lt;h3&gt;{{ title }}&lt;/h3&gt;
              &lt;/div&gt;
              &lt;div class=&quot;uif-row&quot; v-for=&quot;indx in fields.length&quot; :id=&quot;'uifRow' + indx&quot; :key=&quot;indx&quot; v-html=&quot;arrElem[indx]&quot;&gt;&lt;/div&gt;
              &lt;div class=&quot;uif-action&quot;&gt;
                  &lt;def-button
                      :unique-id=&quot;btnAction.uniqueId&quot;
                      :use-style=&quot;btnAction.useStyle&quot;
                      :variant=&quot;btnAction.variant&quot;
                      :action=&quot;btnAction.action&quot;
                      :value=&quot;btnAction.value&quot;
                      :icon=&quot;btnAction.icon&quot; /&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      `,
      beforeMount: function () {
          this.fields.forEach((fields) =&gt; {
              const rowFields = [];
              let elemPos, elemRow, elemType, elemProps;
  
              for (const field in fields) {
                  elemPos = field.split(&quot;_&quot;)[0];
                  elemRow = field.split(&quot;_&quot;)[1];
                  elemType = field.split(&quot;_&quot;)[2];
                  elemProps = fields[field];
  
                  rowFields[elemPos] = this.returnComponent(elemType, elemProps);
              }
  
              this.arrElem[elemRow] = rowFields;
          });
      },
      methods: {
          returnComponent(type, props) {
              const componentByType = {
                  input: `&lt;def-input
                      label=&quot;${props.label}&quot;
                      uniqueId=&quot;${props.name}&quot;
                      class=&quot;${props.class}&quot;
                      mask=&quot;${props.mask}&quot;
                      placeholder=&quot;${props.placeholder}&quot;
                      size=&quot;${props.size}&quot;
                      maxlength=&quot;${props.maxlength}&quot;
                      useStyle=&quot;${props.useStyle}&quot;
                      attrs=&quot;${props.attrs}&quot;&gt;&lt;/def-input&gt;`,
                  select: `&lt;def-select
                      label=&quot;${props.label}&quot;
                      uniqueId=&quot;${props.name}&quot;
                      options=&quot;${props.options}&quot;
                      useStyle=&quot;${props.useStyle}&quot;
                      attrs=&quot;${props.attrs}&quot;&gt;&lt;/def-select&gt;`
              }
  
              return componentByType[type];
          }
      }
  }
  </code></pre>
  <p>I have the above component, its a formularie with x number of ‘uif-row’, the variable fields is an object with all the fields this formularie will have.
  I am trying to fill the ‘uif-row’ with its respective fields but all i get in is…</p>
  <pre><code>&lt;def-input label=&quot;Cotação&quot; uniqueid=&quot;id_cotacao&quot; class=&quot;undefined&quot; mask=&quot;int&quot; placeholder=&quot;undefined&quot; size=&quot;undefined&quot; maxlength=&quot;undefined&quot; usestyle=&quot;undefined&quot; attrs=&quot;undefined&quot;&gt;&lt;/def-input&gt;
  </code></pre>
  <p>and not the component TextField.
  All I want to do is generate a formularie dynamically with x number or rows (divs) and x number of input fields.
  Is there a way to do this?</p>