Computed Properties in VueJS

Let’s now go ahead and learn a new concept in VueJS, Computed Properties.

Problem: We want to manipulate the data property of Vue Instance for the presentation purpose.


Let’s build a simple application which has an input box, wherein user can type their name and we show the count of characters in the name in the realtime.

Livewire Component Library

Something like the image below.

Host Laravel Application on DigitalOcean

Use coupon 5balloons on this Cloudways Affiliate URL to get special discount.

computed properties in vueJS

To build this app we have the following HTML

    <div id="app">
         <label>Type your name: </label>
         <input type="text" v-model="name"/> <br/><br/>
         Your name is {{name}}<br/>
         And is {{charcount}} characters long.

In the above HTML, we have an input box that is attached to the name data property of the Vue Instance. Below the text box, we are displaying the name along with the character length of the name.

Let’s see how we can make use of Computed properties to display the character length count.

    var app = new Vue({
        el: '#app',
        data: {
            name: '',
        computed: {
            charcount: function () {

In the above code snippet we have a Vue Instance with a single data property named name, along with that we have defined a new object named computed.

Inside this object you can define all the computed properties, In this example we have defined a computed property named charcount, which is dependent on the name data property, and we have to refer that via this keyword.

Computed properties have the ability to re-render themselves when the data that they are dependent on changes, thus as we type the name in the text-box we can see the character length changing in real-time.

This example is very basic, but computed properties are a very powerful tool for encapsulating data manipulations and transformations that stay synced with the data that they refer to.


Your name is {{name}}
And is {{charcount}} characters long.

Practice Exercises

  1. Filter a list of objects depending on one of its property value in VueJS (Solution)
  2. Combining Multiple Filters on List using Computed Properties in VueJS. (Solution)
  3. Sorting a List using Computed Properties in VueJS (Solution)

Join my VueJS Newsletter

As I advance in my Journey of learning VueJS, I will be working on different exercises and challenges. Subscribe to receive the latest tutorials (every week) directly in your inbox.

    I won't send you spam. Unsubscribe at any time.

    Powered By ConvertKit

    Site Footer