Form Builder GUI Implementation

Implement the Form Builder GUI into your project

Import the library into your project

1/ Import as global component

import FormBuilder from 'v-form-builder';
Vue.component('FormBuilder', FormBuilder);

2/ Import as single component

import FormBuilder from 'v-form-builder';

export default {
    components: {FormBuilder}
    ...
}

Usage

<template>
    <div>
        // form builder template
        <form-builder type="gui" :form="formConfigData" v-model="formDataValues"></form-builder>
    </div>
</template>

Notes:

• For using Form Builder Template, type must be: gui
• Pass your configurated form template into form prop.
• You can use v-model to get the form values (values that user input)

Test

Go to your http://<your_vue_url_page>/ and test it :D The Form Builder GUI will appear with all functionals

Form Data Values structure

When you get form values, the data should look like this:

{
    // for the static form - an object
    section_name: {
         control_name: "data",
         control_name_2: "data",
         ...
    },

    // for the dynamic form - an array of object
    section_name_2: [
         {
             control_name: "data",
             control_name_2: "data",
             ...
         },
         ...
    ],
}

Note: when you set data back into your GUI form, you should follow this structure too.

APIs

In order to use the API, you need to set a ref:

<form-builder type="gui" :form="formConfigData" ref="FormBuilder"></form-builder>

Get Form Values

You can use the v-model and this way too:

this.$refs.FormBuilder.getValue();

An object of your form values will be return.

Set Form Values

You can use the v-model and this way too:

this.$refs.FormBuilder.setValue(formValuesObject);

For the best practice, I suggest you should use the v-model (2-way binding) :D