JSFeeds: thewebjuice.com - Learn how to work with Computed Properties in VueJS

Friday, 21 July, 2017 UTC

Learn how to work with Computed Properties in VueJS

Summary

Introduction to Computed Properties in VueJS

As we are going ahead with Vue.js Tutorials we are able to see that the Template syntax is highly declarative. This declarative syntax makes Vue.js easy to grasp and as a framework, it becomes easy to incorporate into the system. Templates can conceive a very complex logic but having a complex logic in a template soon becomes pretty tedious and can lead to fatal errors at places. Moreover, you can see the whole system is broken down due to heavy logic which turns out to be unmaintainable soon as the system grows. Consider the logic for formatting time below

<div id="app">
  <label>Normal Date : {{date}}</label>
  <br>
  <label>Formatted Date (DD-MM-YYYY) : {{date.getDate()+'-'+(Number(date.getMonth())+1)+'-'+date.getFullYear()}}</label>
</div>

Above you can see that we have a data point or a variable called date which is bound with the UI using Vue.js. As we go ahead we see that this particular Vue.js component, which also serves as the Root component has a very complex logic in order to build UI for date representation. The facility of template based JavaScript computation that Vue.js gives is being exploited to the core leading to a very messy code. This does enable you for Data Binding but leaves the code is an unmanageable state.

In order to get out of this situation, we use Computed Properties in VueJS. This computed properties in VueJS are being calculated in the Vue instance itself. So for all such complex logic, one should always use Computed Properties. Let’s see a basic example of using Computed Properties and make the sample work.

Implementation of Computed Properties in VueJS

We will directly start by changing the way the Template looks like. Let’s modify the template to something like below

<div id="app">
  <label>Normal Date : {{date}}</label>
  <br>
  <label>Formatted Date (DD-MM-YYYY) using Computed Property : {{formattedDate}}</label>
</div>

Rather than the large computation as shown previously we just replace the date with another property which will be computed using the existing property called

date

. The Vue.js Code for the same will go as shown below

var vm = new Vue({
  el: '#app',
  data: {
    date: new Date()
  },
  computed: {
    formattedDate: function() {
      return this.date.getDate() + '-' + (Number(this.date.getMonth()) + 1) + '-' + this.date.getFullYear();
    }
  }
});

You can see how the computed property results in a property value called

formattedDate

and the function provided for the same is treated as a getter function.

NOTE: The value of the
formattedDate
will always depend on
date
and any update to
date
will be reflected the
formattedDate
. This binding leads to an auto update and also makes the template response quickly. See the sample below in order to understand this concept. This is a simple example where an interval is set and we randomly update the date property, you can see how the computed property immediately changes on updating
date
property.

The Vue.js code goes below where we can see the

setInterval

function which executes after every one second updating the date.

var vm = new Vue({
  el: '#app',
  data: {
    date: new Date()
  },
  computed: {
    formattedDate: function() {
      return this.date.getDate() + '-' + (Number(this.date.getMonth()) + 1) + '-' + this.date.getFullYear();
    }
  }
});


// Set Interval for automatically updating the date property
var days = 0;
setInterval(function(){
	var result = new Date(vm.date);
  result.setDate(result.getDate() + days);
  vm.date = result;
  console.log(vm.date)
  days++;
},1000);

The HTML will go as the above itself. Let’s have a look at the complete working demo code Via a GIF. The code is also available at JSFiddle.

Facebook
Twitter
Google+
LinkedIn
Buffer

Vue.js Computed Properties

You can alternatively have a look at JSFiddle as well below.

I will also recommend you to have a look at the Vue.js Watchers tutorials in order to understand the difference between Computed properties and watcher.

Now if you guys have not got a chance to have a look at other Vue.js tutorials, you can alternatively have a look at the entire Vue.js section. Here goes the list of the entire Vue.js Tutorials.

An Introduction to Vue Framework

Getting Started with Vue using Fiddle

Learn Fast Handling User Inputs & form bindings using Vue

Easily Bind Select and Multi-select using Vue

Learn to make a ToDo List – Vue Component Creation

Vue ToDo list with Delete Option & Global Event Bus – Part II

How to Create Global Event Bus using Vue.js?

The post Learn how to work with Computed Properties in VueJS appeared first on The Web Juice.

... more @ thewebjuice.com

thewebjuice.com