In Vue.js, computed properties are properties that are derived from other reactive properties.
If we just return an expression in the computed property, then we can access it like any other reactive property.
However, we can’t call it like a method to pass in values to computed properties this way.
In this article, we’ll look at how we can pass arguments into computed properties.
Return a Function
We can return a function in our computed property if we want to create a computed property that accepts arguments.
For instance, we can write:
<template>
<div id="app">
<p>{{ fullName("hello") }}</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
firstName: "jane",
lastName: "smith",
};
},
computed: {
fullName() {
return (greeting) => `${greeting} ${this.firstName} ${this.lastName}`;
},
},
};
</script>
We create the fullName computed property by returning a function.
It has to be an arrow function since we want the this value to be the component options object.
This way, we can access this.firstName and this.lastName properly by making sure they’re the values of the firstName and lastName reactive properties that we return in the data method.
Filters
We can also add a filter to our component so that we can format our values the way we want in our templates.
For instance, we can write:
<template>
<div id="app">
<p>{{ `${firstName} ${lastName}` | greet("hello") }}</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
firstName: "jane",
lastName: "smith"
};
},
filters: {
greet: (name, greeting) => {
return `${greeting} ${name}`;
}
}
};
</script>
We have `${firstName} ${lastName}`, which ate the values of the name parameter.
And then we call the greet filter with the 'hello' argument, which is the value of the greeting parameter.
In the filter, return the string with the parameters combined our way.
Methods
We can just create a method that is run every time we can it.
For instance, we can write:
<template>
<div id="app">
<p>{{ greet("hello", firstName, lastName) }}</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
firstName: "jane",
lastName: "smith"
};
},
methods: {
greet(greeting, firstName, lastName) {
return `${greeting} ${firstName} ${lastName}`;
}
}
};
</script>
We just add the greet method that returns the greeting , firstName and lastName parameters combined.
Then we call the greet method in our template with the arguments we want.
The returned value will be rendered.
Conclusion
We can return a function in our computed property method to let us take arguments.
Also, we can use filters and methods as an alternative to computed properties if we want to pass in arguments.
