Introduction to User Input using Vue

In this article, we will be using Vue in order to make User’s inputs come Alive. We will be seeing different ways in which User Inputs can be handled using Vue. User inputs are everywhere ranging from Forms to the actions taken by the mouse events. In this particular section, we will deal with from bindings and basic User Inputs and how to handle them out. We will be using the directive v-model extensively. This is the directive which is used to bind the data with the DOM in a bi-directional manner. So without much ado lets get started with this.

If you have no idea what Vue Framework is, then have a look at “An Introduction to Vue Framework” and if you want to get started with with Vue then the best place is to have a look at “Getting Started with Vue using Fiddle“.

We will divide the whole topic into various sections where we will learn the use of v-model.

  1. Binding simple text box with a label and manipulating it.
  2. Binding Textarea with a paragraph
  3. Binding Checkbox, Radiobox components with  v-model

Getting Started with Binding

Binding input box with Label

In this section, we will use the v-model for a very simple binding. This will bind multiple labels with the input box data. We write the code for this experiment below. You will be able to see that the template described below is for two Vue apps that are separate in all sense and have separate contexts altogether because they belong to the two separate instances of Vue.

In the above-mentioned code, you can see how there are two blocks of Vue instances in order to handle two Vue apps on the screen. You can also see that in the second instance we have pre-initialized the text variable in order to make the result have that text on the input box. Vue takes in an object and the data property of the object takes up the bound variable. If you want you can also pre-initialize it as shown in the second sample. When this is executed, the code base gives rise to two different apps which are separated by concern and context as well as have different representation and yes, the v-model comes to life. You can see a GIF of the whole thing below or Visit JSFiddle for the same.

Vue Data Binding

Vue Data Binding

NOTE: Remember one has to always set up the attribute through the JavaScript because Vue ignores the attribute values like checked, selected & value on any web component.

Binding Textarea with a Paragraph

In the same way as above, we will create a sample application with some HTML as our template and a Vue instance which will help us to hook up with it. We will bind a simple Textarea with a paragraph and see how it works. The template and the JavaScript code for the same are given below along with the JSFiddle Sample.

The above example looks like GIF shown below. Since we are coding on the same Fiddle you will see the changes as we go ahead and the previous samples will also be a part of it.

Text Area Binding Vue

Text Area Binding Vue

Interpolation when done in Textarea does not work, so please be aware that <textarea>{{someVaule}}</textarea>  won’t work.

Binding Checkbox, Radio and Select component

As we have seen above the usage of the v-model , we will go ahead and extend the capability of this in order to fit the Checkbox, Radio and a Select box so as to bind them to a model. Let’s start with a single checkbox and extend it to multiple checkboxes with values.

Single Checkbox

The HTML Template and the JavaScript are as follows:-

You can see this in action at the link here at JSFiddle. The sample of this is shown in the below GIF.

Binding Single Check box using Vue

Binding Single Checkbox using Vue

Now, lets bind an array of Checkboxes in this example. So that if we select multiple values that we need to bind then in such cases we can get the values of the selections. Let’s see the code below and understand how this thing works.

Let’s look at the JavaScript, where you can see that the isChecked variable becomes an Array. Now it will contain the array of Values that are being taken up from the Checkbox. The Checkbox has a value attribute that gets bound to the model when the checkbox is in checked state. This seamlessly binds the values of the checkbox with the isChecked array property. Have a look at the GIF below. You can also have a look at the JSFiddle.

Binding of Array of Checkbox with Vue

Binding of Array of Checkbox with Vue

Radio

Let’s now put up the radio button and bind it out with the DOM. In this example, we will use the v-model which will bind the radio button with the value of the radio button. So in the case of Radio button selected/unselected we can get the values that are selected in the radio group. Let’s see if you have a form where you need to select the Male/Female, once you select then the value will be denied with the data property of the Vue instance. Let’s put up a template and make this happen.

As you see above the selected attribute in the data property gets bound to the radio and the value of the radio is being attributed or assigned to the variable. It’s so very easy to bind the values of the radio as well. Now let’s see this in action in the below GIF. You can alternatively check the JSFiddle link as well.

Bind Radio using Vue

Bind Radio using Vue

Conclusion

The complete example of the Fiddle is shown below. You can go ahead and play with all the above tutorials. All the above samples are mentioned shown in the JSFiddle sample. Have a look at it.

Since this particular article has overgrown in size we will move to another Tutorial so as to cover topics dealing with Select and Multiselect component. We will also be dealing with dynamic values in various components. We will deal with all of these in the next installment of the tutorial. Alternatively, you can also check out the two of the previous posts on Vue to make your journey through easier. Leave your comments in order to let us know if you need some improvements in the posts.

 


Also published on Medium.

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Join our mailing list to receive the latest news and updates from our team.

You have Successfully Subscribed!

Pin It on Pinterest

Share This