Vue.js Form Input Bindings

Vue.js provides a v-model directive that can be used to create two-way data bindings on form inputs, text, textarea, and select fields.

The v-model directive automatically picks the correct way of updating the element according to the input type. It provides two-way data binding by binding the input text element and the value binded to a variable assigned. The v-model directive uses different properties internally and emits different events for different types of input elements. Generally, we use three types of binding in form input binding:

Textarea Binding: In this binding, we use text and textarea to bind the value property and input event.
Radio and Select Binding: In this binding, we use checkboxes and radiobuttons to bind the checked property and change event.
Modifiers Binding: We can also use modifiers like .lazy, .trim, .number, etc. in Form input binding examples.

Textarea Binding

Let's take a simple example to demonstrate textarea binding:

Index.html file:

<html>  
   <head>  
      <title>Vue.js Data Binding</title>  
      <link rel="stylesheet" href="index.css">  
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
    </head>  
    <body>  
      <div id = "databinding">  
         <h3>Textbox</h3>  
         <input  v-model = "name" placeholder = "Enter your name.." />  
         <h3>Your name is: {{name}}</h3>  
         <hr/>  
         <h3>Textarea</h3>  
         <textarea v-model = "textmessage" placeholder = "Add Details"></textarea>  
         <h1><p>{{textmessage}}</p></h1>  
         <hr/>  
         <h3>Checkbox</h3>  
         <input type = "checkbox" id = "checkbox" v-model = "checked"> {{checked}}  
      </div>  
      <script src="index.js"></script>  
   </body>  
</html>  

Index.js file:

var vm = new Vue({
el: '#databinding',
data: {
name:'',
textmessage:'',
checked : false
}
})

Index.css file:

html, body {
margin: 5px;
padding: 0;
}

After the execution of the program, you will see the following output:

Output:

You can see that the textbox and textarea are empty now. The checkbox is also unchecked and shows the false value. Now, type some value in textbox and textarea, the v-model is assigned the value name and the name is displayed in {{name}}, which displays whatever is typed in the textbox. In the same way, the value will be displayed that is written in textarea.

Radio and Select Binding

Let's take a simple example to demonstrate radio and select binding:

Index.html file:

<html>  
   <head>  
      <title>Vue.js Data Binding</title>  
      <link rel="stylesheet" href="index.css">  
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
    </head>  
    <body>  
      <div id = "databinding">  
         <h3>Radio</h3>  
         <input type = "radio" id = "yes" value = "Yes" v-model = "picked"> Yes  
         <input type = "radio" id = "no" value = "No" v-model = "picked"> No  
         <h3>Radio element clicked: {{picked}} </h3>  
         <hr/>  
         <h3>Select</h3>  
         <select v-model = "languages">  
            <option disabled value = "">Please select one</option>  
            <option>Java</option>  
            <option>PHP</option>  
            <option>C</option>  
            <option>C++</option>  
            <option>JavaScript</option>  
         </select>  
         <h3>Your selected language is: {{ languages }}</h3>  
         <hr/>  
      </div>  
      <script src="index.js"></script>  
   </body>  
</html>  

Index.js file:

var vm = new Vue({
el: '#databinding',
data: {
picked : 'No',
languages : "Java"
}
})

After the execution of the program, you will see the following output:

Output:

You can see that the default selected radio element is No and selected language is Java. Now, you can change the value as you required. See the following output:

Modifier Binding

Let's see an example to demonstrate all three modifiers .trim, .number, and .lazy altogether.

.number Modifier: It is used when you want user input to be typecast as a number automatically. It allows you to enter numbers only. It does not take any other input besides numbers.

<input v-model.number = "age" type = "number">

.lazy Modifier: It is used to display the content present in the textbox only after it is fully entered and the user leaves the textbox. The v-model syncs the input with the data after each input event by default.

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

.trim Modifier: This modifier is used to trim the whitespace from user input automatically. It removes any spaces entered at the start and at the end.

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

Index.html

<html>  
   <head>  
      <title>Vue.js Data Binding</title>  
      <link rel="stylesheet" href="index.css">  
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
    </head>  
    <body>  
      <div id = "databinding">  
          <h3> The .number modifier example</h3>  
          <span style = "font-size:20px;">Enter Age:</span> <input v-model.number = "age" type = "number">  
          <br/>  
          <br/>  
          <hr/>  
          <h3> The .lazy modifier example</h3>  
         <span style = "font-size:20px;">Enter Message:</span> <input v-model.lazy = "msg">  
         <h4>Display Message : {{msg}}</h4>  
         <br/>  
         <hr/>  
         <h3> The .trim modifier example</h3>  
         <span style = "font-size:20px;">Enter Message : </span><input v-model.trim = "message">  
         <h4>Display Message : {{message}}</h4>  
      </div>  
      <script src="index.js"></script>  
   </body>  
</html>  

Index.js

var vm = new Vue({
el: '#databinding',
data: {
age : 0,
msg: '',
message : ''
}
})

After the execution of the program, you will see the following output:

Output:

You can see that every modifier is empty. Now, you can enter any values to see the result as the following output.

Resource by : javatpoint

31 December, 2020

Vue.js Form Input Bindings