VsFrom

Компонент VsFrom створений для використання усіх компонентів форми в єдиному серидовищі

Підключення

vue

<vs-form v-model="form" />

hbs

{{{_vue "vs-form-"}}}

Component API

Name	Description	Type
scheme	Схема форми для відображення компонентів	Array
api	URL посилання до API з даними схеми для форми	String

Базове використання

  <template>
  <div id="app">
    <main>
        <pre style="white-space: normal" v-if="formData">
        {{ formData }}
        </pre>
      <VsForm v-model="formData" :scheme="scheme" />
    </main>
  </div>
</template>
<script>
export default {
  data() {
    return {
      formData: null,
      scheme: [
        {
          type: "text",
          key: "text_value",
          label: "Введіть текст",
        },
        {
          type: "switch",
          key: "switch_value",
          label: "Чи приймати заявки",
        },
        {
          type: "checkbox",
          key: "checkbox_value",
          label: "Оберіть значення",
          options: ["Риби", "Коти", "Ведмеді"],
        },
        {
          type: "select",
          key: "autocomplete_value",
          label: "Оберіть пропозицію",
          options: ["Печиво", "Огірки", "Соки"],
        },
      ],
    };
  },
};
</script>

Використання з API

  <template>
  <div id="app">
    <main>
        <pre style="white-space: normal" v-if="formData">
        {{ formData }}
        </pre>
      <VsForm v-model="formData" api="https://cdn.softpro.ua/demo/form1.json" />
    </main>
  </div>
</template>
<script>
export default {
  data() {
    return {
      formData: null,
    };
  },
};
</script>