n How to use Computed Properties in Vuejs | CodimTh

Please Disable Your Browser Adblock Extension for our site and Refresh This Page!

our ads are user friendly, we do not serve popup ads. We serve responsible ads!

Refresh Page
Skip to main content
On . By CodimTh

Let’s understand computed properties using an 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>

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.


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.


Riadh Rahmi

Senior Web Developer PHP/Drupal & Laravel

I am a senior web developer, I have experience in planning and developing large scale dynamic web solutions especially in Drupal & Laravel.

Web Posts


Page Facebook