Form Renderer Starter

Show your form and let users use it without a doubt

Getting Your Form Configuration

Basically, you need to retrieve it by yourself in your project

You can visit my Real-life example project to see some of the ways to retrieve the Form Configuration

Render the Form

<template>
    <FormRenderer
            :form-configuration="formData"
            v-model="formInputData"
    />
</template>
<script>
    import {FormRenderer} from 'v-form-builder'

    export default {
        components: {
            FormRenderer,
        },
    
        data() {
            return {
                formData: null,
                formInputData: null,
            }
        },
        
        methods: {
            getFormData() {
                // get form data...
                
                //...
                this.formData = ////;
            }
        },
        
        created() {
            this.getFormData()
        }
    }
</script>

Data Returns

A key-value Object:

• Key: field name (if empty, field unique ID will be used)

• Value: field value(s)

{
  "name": "Lawson Schoen",
  "brief-description": "Hauck, Ryan and Nicolas",
  "long-description": "Velit commodi saepe sed amet id odit quis. Cum consequuntur eius perferendis. Et et tenetur id voluptatibus.\n \rHarum quos magnam sint asperiores vero doloremque omnis et. Tenetur in repellat consequuntur. Nobis quia voluptas quas nesciunt quasi suscipit porro. Enim quia beatae aut ea. Minima nostrum vitae sapiente amet et dolor.\n \rMolestiae dolores eos doloremque iure a. Ad qui eos. Debitis error laborum enim quaerat est expedita suscipit.",
  "doc_props": [
    "1"
  ],
  "is_deletable": 1,
  "doc_date": "18/12/2019",
  "doc-process-range": {
    "startDate": "2020-06-18",
    "endDate": "2021-04-23"
  },
  "doc_processor": "",
  "total_value": 155.81,
  "permissions": [
    "xx"
  ],
  "user_email": "[e-mail]"
}

Set Old Form Values

Basically, change the data that bind to the v-model . Follow by the key-value object above.