How to use Computed Properties in Vuejs

Let’s understand computed properties using an example.

Example:

      <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>

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

Here we are calling the computed method getfullname, which returns the firstname and the lastname entered.

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

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

Computed Setter

Computed properties are by default getter-only, but you can also provide a setter when you need it.

Example:

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }

Now when you chnage this.fullName = 'new value', the setter will be invoked and vm.firstName and vm.lastName will be updated accordingly.