Learn how to work with Computed Properties in VueJS

Shiv Kumar Ganesh
Jul 20, 2017 · 4 min read

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

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

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

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.

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.

Vue.js Computed Properties

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

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.

Originally published at The Web Juice.

Shiv Kumar Ganesh

Written by

Interested in friends and am a Web Developer. Design Websites and Web Solutions in major Platforms, SEO Consultant

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade