Vue3 Compute

Posted on  by admin
The Computed property is usually used to compute data from some other data.

It is known for its reactivity because whenever a variable involved in some computed property gets changed, the whole property gets recomputed.This post will learn to pass the parameter to computed property and see how to use Vue computed with parameter.

Before getting started with passing parameters to the computed property, let’s first understand the computed properties by going through the example.

Suppose we have two variables named “firstName” and “lastName” in our Vue component:.

data(){return{ firstName:"", lastName:""}},//.. We want to compute a “fullName” property that will combine the “firstName” and “lastName” and recompute the fullName whenever any of the two variables “firstName” and “lastName” gets changed.

So, the computed property for computing the full name would be like this:.

computed:{ fullName(){returnthis.firstName+' '+this.lastName;}}//..

Now let’s create some input fields and bind the “firstName” and “lastName” variables to the input fields and also bind the “fullName” property in the ‘p’ tag to view the instant change on the change of the first anime of the last name.

The HTML part of this component will be like this:Alright!