Hooks Introduction

Introduce to Hooks

In case you don't know what hook is, I will tell you in this article.
Hook is a specific function that will trigger in the specific event. In other libraries of JavaScript. Hook is very useful to deal with specific case for your situation.

So in Vue Form Builder, I'll go the same too. I have built many hooks in order to help you deal with the specific cases. Hooks are available from both:

• Form Builder Template
• Form Builder GUI

So you don't have to worry about special case in your form, you can let Hook help you with that :D.

How to use Hooks?

You need to bind the options prop in form-builder like this:

<form-builder type="template" v-model="formConfigData" :options="formTemplateOptions"></form-builder>

And in your data, you should define your function for the specific hook like this:

data() => ({
    formTemplateOptions: {
        hooks: {
            'Section.beforeAdd': function(sectionInfo) {
            // your code in here
            }
        }
    }
})

Best practice is you should define your hooks function in methods of Vue, and then in created(), you set that function to a specific hook that you want to use.

Code will go the same for both of Template & GUI. You will see all hooks available for both GUI & Template in the next article :D