Getting Started

Before we get into a detailed overview, Let's create a login form to demonstrate the syntax.

<vf-form action="process-form" method="POST" :validation="validation" :options="options">
  <vf-text label="User name:" required name="username" v-ref:username></vf-text>
  <vf-password label="Password:" required name="password" v-ref:password></vf-password>

A few points to notice in this brief example:

  • All of the plugin components are namespaced using a vf- prefix.
  • By default the form is sent to the server using a normal HTTP request. See next page for other options.
  • The status bar is an optional, yet highly recommended, component which can be used to display various messages during the form's lifecycle.
  • All fields must have the label and name props.
  • In order to make field retrieval faster, it is recommended to use a v-ref with the same value as the name property. This will allow the plugin the retrieve the field by its pointer, rather than by iterating through the components' tree.
  • Due to its prevalence the required rule can be passed as a plain boolean prop to any field, in keeping with HTML5 syntax.

results matching ""

    No results matching ""