|

Vuejs Form Example

Vuejs Form Example

Let’s see how to work with html forms when using Vue by way of a vuejs form example. This tutorial will cover several topics and will also include a live demonstration you can try for yourself. In forms, there are many input types to deal with and we will cover most of them here. We’ll see how to fetch values from input fields and how to work with that data. In addition, we’ll see how to work with form controls such as an email field, password field, select field, check boxes, radio buttons, as well as a custom form control we can build as a dedicated Vue component.


Text Input Binding With v-model

We can start with a basic text input field, where we accept a user’s email address. This is pretty easy, we’ve seen this many times. We have an <input> tag which has the vue specific markup highlighted.

In the <script> section we set up the data() method to associated the data with the UI. The data() method returns an object as we know, but we are also setting up a nested userData object to hold the email property. This is because we will be adding more properties in the form and the userData object works like a nice namespace.


Password Input Binding and v-model.lazy

Now we can add a text input which binds to a password. This example will work almost exactly like the snippet above. There is one difference however. We are adding the .lazy modifier to the v-model. What this does is to sync the input data to the data object *after* a change event such as moving focus to a different field. This might be handy in a form when you don’t want to apply any validation until a user hits the submit button and everything is fully filled out.

We can add this new password property to the userData object in our data() method.


Number Typecast with v-model.number

This form is a type of review form and the user is able to include a numeric review from 1 to 10. For this type of data binding, we can make use of v-model.lazy. This is helpful because even when you use type=”number” in the form, the value of HTML input elements always returns a string.

We will need to add this data property as well in our <script>.


Working With Textarea

Now we can add a text area to the form as well where a user can add a few sentences as part of their review. Note that you need to use v-model to bind data to the text area. If you try to use interpolation between <textarea> and </textarea> it will not work.

Let’s also add the message property to our data() area.


Checkboxes Use an Array

Now we will move on to using checkboxes which are a little different because you can have multiple true values in collection of checkboxes in a form. Here are two checkboxes which are part of the same form. This means a user could select both at the same time if they like. Note that both inputs have the same v-model=”checkboxOptions” binding. In the case of the user wanting the daily special as well as the monthly coupons they would be checking both checkboxes.

We handle this in the script area by making use of a simple array like we see here.


Radio Buttons are Single Value

Radio buttons look similar to checkboxes but the difference is that a collection of radio buttons only allows one option to be selected. We want to know if our user is male or female, we we can add this markup here. Both inputs share the same v-model=”radioBoxOption” binding, but only one will be used in the data().

Since the radioBoxOption property only supports one value, we can set it up as such and pre populate the value with ‘Male’.


Select Inputs

The form can include a select dropdown menu to allow a user to choose the priority level of this review. Since a <select> input has many nested <option> tags, we can make use of v-for to render all of them.

In the data() area, we will need to properties for this. One for priorities and one for selectedPriority. Note that priorities is an array of values, and this is how the v-for in the template is able to render out many <option> values.


v-model for Custom Controls

You can add a custom control to a form by building one as a separate component if you like. Let’s build a component where a user can select true or false, similar to how two radio buttons might work. We can create this component in a separate file of Switch.vue.

Switch.vue

Now we need to import this in App.vue and register it as a component.

With this now set up, we can actually render this switch in our form like this.


Submit and Prevent

So what are we going to do with this form data? Well for our purposes, we are just going to add a way to display the data entered to the user. By default, the form is going to try and submit to a server, but we don’t really want to do that. To prevent that from happening, we can simply use the .prevent modifier as seen here.

Here is the final markup for the <script> area. The button is actually triggering a submitted() method now. All that method does is to set the value of the isSubmitted property to true.

We’ll use this isSubmitted data property to decide whether or not to show the data to the user by way of a v-if.


Try it out!

Go ahead and take the form we built for a test drive.


Vuejs Form Example Summary

We learned a good deal about forms and VueJs in this tutorial. We covered how to use all of the standard html form controls in addition to creating our very own custom control as a Vue component. During the course of this, we saw how to use v-model for our data binding, and some special cases where we might need to make use of a modifier such as lazy or number. Finally, we provided a nice demo where you can test out the data bindings on your own.

|