We now have a youtube channel. Subscribe!
Home
Vue.js

Vue.js | Computed Properties

Vue.js Computed Properties


Hello folks! welcome back to a new edition of our Vue.js tutorial. In this tutorial, we will study about Vue.js Computed Properties.

So far, we've seen methods for Vue instance and for components. Computed properties are like methods but with few difference in comparison to methods, which we're going to discuss in this tutorial.

At the end of this tutorial, we will be able to make a decisions on when to use methods and when to use computed properties.

Let's understand computed properties with an example -

Example

Following below is a simple example -

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "computed_props">
         FirstName : <input type = "text" v-model = "firstname" /> <br/><br/>
         LastName : <input type = "text" v-model = "lastname"/> <br/><br/>
         <h1>My name is {{firstname}} {{lastname}}</h1>
         <h1>Using computed method : {{getfullname}}</h1>
      </div>
      <script type = "text/javascript" src = "js/vue_computedprops.js"></script>
   </body>
</html>

vue_computeprops.js

var vm = new Vue({
   el: '#computed_props',
   data: {
      firstname :"",
      lastname :"",
      birthyear : ""
   },
   computed :{
      getfullname : function(){
         return this.firstname +" "+ this.lastname;
      }
   }
})

Here, we've created .html file with firstname and lastname. Firstname and Lastname is a textbox which are bound with the properties firstname and lastname.

We are calling the computed method called getfullname, which return the firstname and lastname entered.

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

As we type in the textbox, same is yielded by the function, when the properties firstname or lastname is changed. Thus, with the help of computed properties we don't have to do anything specific, like remembering to call a function. Using computed properties, it gets called by itself, as the properties used inside changes, i.e. firstname and lastname.

The same is displayed in the browser. Type in the textbox and the same will get updated using the computed function.



Now, let us try to understand the difference between a method and computed property. Both are objects. They're functions defined inside, which returns a value.

In case of a method, we call it as a function, and for computed as a property.

Example

With the following example, let's understand the differences between computed property and method.

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "computed_props">
         <h1 style = "background-color:gray;">Random No from computed property: {{getrandomno}}</h1>
         <h1>Random No from method: {{getrandomno1()}}</h1>
         <h1>Random No from method : {{getrandomno1()}}</h1>
         <h1  style = "background-color:gray;">Random No from computed property: {{getrandomno}}</h1>
         <h1  style = "background-color:gray;">Random No from computed property: {{getrandomno}}</h1>
         <h1  style = "background-color:gray;">Random No from computed
            property: {{getrandomno}}</h1>
         <h1>Random No from method: {{getrandomno1()}}</h1>
         <h1>Random No from method: {{getrandomno1()}}</h1>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#computed_props',
            data: {
               name : "helloworld"
            },
            methods: {
               getrandomno1 : function() {
                  return Math.random();
               }
            },
            computed :{
               getrandomno : function(){
                  return Math.random();
               }
            }
         });
      </script>
   </body>
</html>

In the above code, we've created a method that's called getrandomno1 and a computed property with a function getrandomno. Both are returning back random numbers utilizing Math.random().

It is displayed in the web browser as shown below. The method and computed property are called repeatedly to show the difference.


If we look at the above values, we are going to notice that the random numbers returned from the computed property stays the same, irrespective of the number of times that it is called. This means everytime it is called, the last value is updated for all. However for a method, it is a function, thus, everytime it is called it returns a different value.


Get/Set in Computed Properties

In this section, we are going to learn about Get/Set functions in computed properties using an example.

Example

Following is a simple example -

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "computed_props">
         <input type = "text" v-model = "fullname" />
         <h1>{{firstName}}</h1>
         <h1>{{lastName}}</h1>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#computed_props',
            data: {
               firstName : "Kennedy",
               lastName : "Nkpara"
            },
            methods: {
            },
            computed :{
               fullname : {
                  get : function() {
                     return this.firstName+" "+this.lastName;
                  }
               }
            }
         });
      </script>
   </body>
</html>

We've defined one input box which is bound to fullname, which is a computed property. It returns a function called get, which gives the fullname, i.e. the first name and the last name. Also, we've shown the firstname and lastname as well -

<h1>{{firstName}}</h1>
<h1>{{lastName}}</h1>

Let us check the same in the browser -


Now, if we change the name in the textbox, we will see the same is not reflected in the name shown in the following screenshot -


Let's add the setter function in the fullname computed property -

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "computed_props">
         <input type = "text" v-model = "fullname" />
         <h1>{{firstName}}</h1>
         <h1>{{lastName}}</h1>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#computed_props',
            data: {
               firstName : "Kennedy",
               lastName : "Nkpara"
            },
            methods: {
            },
            computed :{
               fullname : {
                  get : function() {
                     return this.firstName+" "+this.lastName;
                  },
                  set : function(name) {
                     var fname = name.split(" ");
                     this.firstName = fname[0];
                     this.lastName = fname[1]
                  }
               }
            }
         });
      </script>
   </body>
</html>

We've added the set function in the fullname computed property.

computed :{
   fullname : {
      get : function() {
         return this.firstName+" "+this.lastName;
      },
      set : function(name) {
         var fname = name.split(" ");
         this.firstName = fname[0];
         this.lastName = fname[1]
      }
   }
}

It has the name as the parameter, which is fullname in the textbox. Later, it is split on space and the firstname and lastname is updated. Now, when we run the code and edit the textbox, the same thing is going to be displayed in the browser. The firstname and lastname will be updated because of the set function. The get function returns the firstname and lastname, while the set function updates it, if anything is updated.


Now, whatever is typed into the textbox will match with what is displayed as seen in the above screenshot.


Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial, we will be discussing about Vue.js Watch Property.

Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.

Post a Comment

Hello dear readers! Please kindly try your best to make sure your comments comply with our comment policy guidelines. You can visit our comment policy page to view these guidelines which are clearly stated. Thank you.
© 2023 ‧ WebDesignTutorialz. All rights reserved. Developed by Jago Desain