Introduction

When building web applications, there is always the possibility of working with . Learning to handle them as you work with different tools is very important. In this tutorial, you will see how to handle in Vue.js.

Get Started

Create a new Vue project using Vue-CLI. If you do not have Vue-CLI installed on your machine, you can do so by running:

That will install Vue-CLI globally on your machine. You can go ahead to create the project by running:

That will create a new Vue project, using the Webpack template. Navigate to the directory that was created for the project, and install the dependencies.

You will be making use of Bootstrap in this tutorial. Open your index.html file and make it look like this.

Nothing fancy here—just the link element tag for our Bootstrap stylesheet. You will build a simple registration form from scratch, and bind the values entered into the form using v-model. When working with forms in Vue.js, you bind form input values to the Vue instance using the v-model directive.

Input Binding

Let’s get started with some simple text input to collect the email address, password, and age of the user. Open up your App.vue file.

Edit the template section to look like what I have below.

In the above, you are using the v-model directive to bind the inputs for email, password, and age to an object. Here, the object is called userData. The userData object is supposed to have different properties—email, password and age—where the values of the inputs will be saved.

The userData object has to be defined in the option of your Vue instance.

With that, you have established a two-way binding. You can now access the values for the email, password, and age inputs as userData.email, userData.password, and userData.age respectively. From the above, you set the default value for the age object. Without entering a value, the value is set at 40. This is an example of how you can implement defaults when working with forms in Vue.js.

Input Modifiers

Now go to the form group for your password to make the password visible. The form group should look like this.

As you enter inputs in the input box, each letter you enter gets displayed. Vue.js gives you the option to halt display of the values till you move to another input field or another place in the page. To do this, you have to edit the v-model directive by adding a lazy modifier, like so.

This does not listen to the input event, but the change event that gets fired when you are done with that input field. Another modifier that can come handy is the trim modifier. If used for the email field, it will look like this.

This is the same way you used the lazy modifier. The trim modifier will remove any extra space from the entered values.

Working with textarea is like what you did above. The only difference is that interpolation will not work. Let’s add a textarea to our form, inside the form tag.

Update the model to look like this.

Checkboxes and Radio Buttons

Checkboxes give users the opportunity to select more than one option. When implementing this, the values are bound to the same array.

So, in your template, you should add this.

While the data model is updated too.

If you are working with radio buttons, where the user can only select one option, you do not make use of an array. Let’s add radio buttons to the registration form.

The corresponding data model will look like this.

Vue.js knows that both radio buttons belong to the same group, so it only allows the selection of one. It also stores the value of the selected radio button in the gender property; this is done automatically for you.

Drop-Downs

The v-model directive is also used for dropdowns. In the template, you are to loop through a collection of values, as these values are automatically populated in your form.

Here is a drop-down that loops through a list; the list will be defined in the data model.

The data model should look like this.

The binding is done on the select tag element, and not on the individual options. A default option is set in the data model when a user selects another option, and the selectedExpertise gets updated.

Form Submission

Here, you’ll add a submit button. You’ll need to prevent the submit button from submitting the form to the server, which is its default behaviour. You’ll substitute that with displaying the form on the page. 

Thus there will need to be a method that changes the value of the display section to true. When true, the display section is expected to show the values of the form. Start by adding the submit button.

Here, you’re listening for the click event, and when the button gets clicked, you want to call a method. This method needs to be added to the script section of your code.

With that done, you can add the display section, after the closing tag of the form.

With that, when the submit button gets clicked, the values entered in the form will be displayed.

Conclusion

At this point, you can work effectively with forms when building applications using Vue.js. If you’re looking for additional resources to study or to use in your work, check out what we have available in the Envato Market.

You learned how to work with all possible parts of a form you might encounter in your journey as a developer. You’ve tried your hand at inputs, select options, radios, checkboxes, and textarea. 

Thanks for reading!



Source link

LEAVE A REPLY

Please enter your comment!
Please enter your name here