Vue Computed Property

Posted on  by admin

We have already seen methods for Vue instance and for components. Computed properties are like methods but with some difference in comparison to methods, which we will discuss in this chapter. At the end of this chapter, we will be able to make a decision on when to use methods and when to use computed properties. Let’s understand computed properties using an example.

# Computed Properties

Here, we have created .html file with firstname and lastname.

Firstname and Lastname is a textbox which are bound using properties firstname and lastname.

We are calling the computed method getfullname, which returns the firstname and the lastname entered. 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. The same is displayed in the following browser. Type in the textbox and the same will get updated using the computed function.

Now, let’s try to understand the difference between a method and a computed property. Both are objects. There are functions defined inside, which returns a value.

In case of method, we call it as a function, and for computed as a property.