template.vue

<template>
  <div class="PrototypeForm q-page-internal">
    <div class="q-page-internal-header">
      <label>{{ header }}</label>
    </div>

    <div class="app-form-wrapper">
      <div class="form form-grid app-form-body">
        <div
          v-for="field in componentsBare"
          :key="field.$key"
          v-show="!field.$layout.formHidden"
          :class="classNames(field)"
        >
          <label v-html="htmlLabel(field)"/>
          <component
            :tabindex="tabIndex()"
            :is="field.is"
            :ref="`form:component-${field.$layout.formOrder}`"
            :component="field.$key"
            v-model="record[field.$key]"
            v-bind="field.attrs"
            v-on="field.listeners"
          />
          <div class="field-error">
            <small
              v-show="hasError(field.$key)"
              v-html="htmlErrorMessage(field)"
            />
          </div>
        </div>
        <div
          class="form form-grid app-form-body"
          v-for="(segment, key) in segments"
          :key="key">
          <div
            v-for="field in getComponents(key)"
            :key="field.$key"
            v-show="!field.$layout.formHidden"
            :class="classNames(field)"
          >
            <label v-html="htmlLabel(field)"/>
            <component
              :tabindex="tabIndex()"
              :is="field.is"
              :ref="`form:component-${field.$layout.formOrder}`"
              :component="field.$key"
              v-model="record[field.$key]"
              v-bind="field.attrs"
              v-on="field.listeners"
            />
            <div class="field-error">
              <small
                v-show="hasError(field.$key)"
                v-html="htmlErrorMessage(field)"
              />
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="q-btn-section">
      <template v-for="button in buttons">
        <q-btn
          :tabindex="tabIndex()"
          :ref="`form:button-${button.$key}`"
          :key="button.$key"
          v-if="!button.hidden"
          v-bind="button.attrs"
          v-on="button.listeners"
        />
      </template>
    </div>
  </div>
</template>