Forms

TIP

There is an entire section in the guide dedicated to this matter

Most of the web apps that you will build using Vue.js will likely require some kind of input from your users. Be it via text that they need to enter to fill in a particular field, or a checkbox indicating whether they want certain feature to be turned on or off.

We'll touch a little bit on what it looks like to use forms in Vue and what the famous v-model directive can do for us in this area.

v-model

This is a special built-in directive which will serve as syntactic sugar to manage how the state of the app will be affected upon user interaction with your form elements.

It is very intelligent in the sense that it knows when you are using it on an <input>, <textarea> or perhaps a <select> input, and updates the data bound to it accordingly.

Check out the following Pen so you can see for yourself how it works:

Pen goes here.

Modifiers

These bring small but practical help when building forms. They go right after v-model and before the directive's value, let's explore them real quick:

.lazy

This will signal the update to the bound data until after the change event has been emitted, as opposed to being the input event (default behavior).

<input v-model.lazy="myValue">

.number

Ever had to do the dance where you read the input's value as a string, then you have to format it via Number(myInput.value) or something similar?

Do you need more time to spend with your loved ones? Here is the solution for you!

<!-- Even if we use `type="number"`, `quantity` would be a string -->
<input v-model.number="quantity" type="number">

.trim

This one is also aimed at give you your time back. Automagically remove the white spaces from your inputs with this!

<input v-model.trim="myValue">

You can see them all in action here:

See the Pen 13. v-model modifiers by @ackzell on CodePen.

Components

All good when native elements are being used, but what if I wanted to have my own more elaborated, perhaps over engineered more sophisticated components for my apps?

You can actually create custom inputs for these too! Oh my gosh... I ❤ Vue.

To be continued...