Computed Properties in Vue.js

Computed Properties in Vue.js

A computed property is one of the essential features of Vue.js, which is used by the developers to describe a value that depends on other values. It helps to listen to the changes which are doing in the user interface components and perform the necessary calculations.

If you want to do any multiple expressions in the Vue application, and to have new declarative templates, we can use the computed property in the Vue instance.

Example: This example explains how we can use the Vue.js computed property in the application.

Index.html

<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <title>Vue.js Computed Property</title>
     <script src="https://unpkg.com/vue/dist/vue.js"></script> 
   </head>
   <body>
     <div id="app">
         FirstName : <input type = "text" v-model = "firstname" /> <br/> 
         LastName : <input type = "text" v-model = "lastname"/> <br/>
         Address : <input type = "text" v-model = "address" /> <br/>
          <h1>My name is {{firstname}} {{lastname}}</h1>
          <h1> By Using computed method : {{getfullname}}</h1> 
     </div>
   </body>
 </html> 

Main.js

import Vue from 'vue'
 import App from './App'
 import router from './router'
 Vue.config.productionTip = false
 var vm =  new Vue({
    el: '#app',
    data: { 
       firstname :"",
       lastname :"",
       address : ""
    },
    computed :{
       getfullname : function(){
          return this.firstname +" "+ this.lastname; 
       } 
       } 
       } )

Output: After the successful execution of the above code, we will get the output, as shown below:

Computed Properties in Vue.js

Next, when you enter the value in the textbox, it returns the same value with the computed property, as shown below:

Computed Properties in Vue.js

In the above example, we have made a .vue file with firstname, lastname, and address. Firstname, lastname, and address is a textbox, which is bound with the input properties. Here we can call the getfullname computed method that returns the first and last names entered in the textbox. The computed property is used to return the value which was entered in the textbox, as shown below:

     computed :{
       getfullname : function (){
         return this.firstname +" "+ this.lastname;
       }
     } 

If we type the value in the textbox, the same value is returned by the function. Thus, we don't need to do anything special with the help of computed property. For example, remembering how to call a function. It gets a call by itself with the computed properties, as the property used within the modifications in the textbox, which is the first name, last name, and address.

Get/Set in Computed Property

In this section, we are going to learn how we can apply the Get/Set methods in the Vue.js computed property. Vue.js allows us to specify only one textbox in this Get/Set property, which is bound to the full name, and it is a computed property. This property returns a function called Get method, which gives the full name of the textbox, namely first name, and last name.

Example: This example explains how we can use the Get/Set method in the Vue application.

Index.html

<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <title>Vue.js Computed Property</title> 
     <script src="https://unpkg.com/vue/dist/vue.js"></script>
   </head>
   <body>
     <div id="app">
       <input type = "text" v-model = "fullname">
       <h1> {{firstname}} </h1>
       <h1> {{lastname}} </h1>  
     </div> 
   </body> 
 </html> 

Main.js

import Vue from 'vue'
 import App from './App'
 import router from './router'
 Vue.config.productionTip = false
 var vm =  new Vue({ 
    el : '#app',
   data: {
       firstname : "John",
       lastname : "Peter",
       methods : { 
       },
       computed : {
       get : function(){
         return this.firstname +" "+ this.lastname;
       }
     } 
     } 
     } )

Output: After Executing this code, we will get the output, as shown below:

Computed Properties in Vue.js

If you want to change the value in the textbox, the value will not be reflected in the computed property. It always shows the same value, as shown below:

Computed Properties in Vue.js