Problem
is this possible to pass parameter in computed properties in Vue.Js. I can see when having getters/setter using computed, they can take a parameter and assign it to a variable. like here from documentation:
// ...
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
// ...
Is this also an option:
// ...
computed: {
fullName: function (salut) {
return salut + ' ' + this.firstName + ' ' + this.lastName
}
}
// ...
Where the computed property accepts a parameter and returns the required result. When I do this, though, I receive the following error:
Should I use methods in such situations?
Asked by Saurabh
Solution #1
Most likely, you’ll wish to employ a technique.
<span>{{ fullName('Hi') }}</span>
methods: {
fullName(salut) {
return `${salut} ${this.firstName} ${this.lastName}`
}
}
Technically, a calculated property can be used with a parameter like this:
computed: {
fullName() {
return salut => `${salut} ${this.firstName} ${this.lastName}`
}
}
(Thanks to Unirgy for providing the foundation code for this.)
A computed property differs from a method in that computed properties are cached and only change when their dependencies change. Every time a method is called, it is evaluated.
When parameters are required, there are usually no advantages to using a computed property function over a method. Though it allows you to have a parametrized getter method connected to the Vue instance, you lose caching, so there’s no practical benefit, and you might even damage reactivity (AFAIU). You can read more about this in Vue documentation https://vuejs.org/v2/guide/computed.html#Computed-Caching-vs-Methods
The only time it’s useful is when you need to use a getter and it needs to be parametrized. In Vuex, for example, this is a common occurrence. It’s the only way to obtain parametrized results from the store synchronously in Vuex (actions are async). As a result, official Vuex documentation lists this approach for its getters https://vuex.vuejs.org/guide/getters.html#method-style-access.
Answered by damienix
Solution #2
You can use methods, but if they don’t mutate data or have external impacts, I still prefer to employ computed properties over methods.
You can send arguments to computed properties in the following fashion (not documented, but suggested by maintainers; I’m not sure where):
computed: {
fullName: function () {
var vm = this;
return function (salut) {
return salut + ' ' + vm.firstName + ' ' + vm.lastName;
};
}
}
EDIT: Do not use this solution; it merely confuses the code and provides no benefit.
Answered by Unirgy
Solution #3
Technically, we can give a parameter to a calculated function in the same manner that we can pass a parameter to a vuex getter function. A function that returns a function is an example of such a function.
For instance, in a store’s getters:
{
itemById: function(state) {
return (id) => state.itemPool[id];
}
}
This getter can be assigned to a component’s calculated functions:
computed: {
...mapGetters([
'ids',
'itemById'
])
}
This computed function can then be used in our template as follows:
<div v-for="id in ids" :key="id">{{itemById(id).description}}</div>
The same approach can be used to build a calculated method with a parameter.
computed: {
...mapGetters([
'ids',
'itemById'
]),
descriptionById: function() {
return (id) => this.itemById(id).description;
}
}
Use it in our template as well:
<div v-for="id in ids" :key="id">{{descriptionById(id)}}</div>
Having said that, I’m not claiming that this is the best method to work with Vue.
However, I noticed that when the item with the specified ID is mutated in the store, the view’s contents are automatically refreshed with the item’s new properties (the binding seems to be working just fine).
Answered by Stéphane Appercel
Solution #4
[Vue2] Vue components feature filters, which let you to apply formatting and modifications to any section of your template dynamic data.
They have no effect on the data of a component, but they do affect the output.
Let’s pretend you’re printing a name:
It’s worth noting that the syntax for applying a filter is | filterName. If you’re familiar with Unix, you’ll recognize that as the Unix pipe operator, which is used to provide an operation’s output as an input to the following one.
The component’s filters attribute is an object. A single filter is a function that takes one parameter and outputs another.
The returned value is the one that’s actually printed in the Vue.js template.
Answered by Diego Caldeira
Solution #5
However, there are times when it is necessary. I’ll show you a basic example of utilizing getter and setter to pass value to a calculated property.
<template>
<div>
Your name is {{get_name}} <!-- John Doe at the beginning -->
<button @click="name = 'Roland'">Change it</button>
</div>
</template>
And the script
export default {
data: () => ({
name: 'John Doe'
}),
computed:{
get_name: {
get () {
return this.name
},
set (new_name) {
this.name = new_name
}
},
}
}
When the button clicked we are passing to computed property the name ‘Roland’ and in set() we are changing the name from ‘John Doe’ to ‘Roland’.
When calculated is used with getter and setter, there is a typical use case shown below. Assume you’ve got the following vuex store:
export default new Vuex.Store({
state: {
name: 'John Doe'
},
getters: {
get_name: state => state.name
},
mutations: {
set_name: (state, payload) => state.name = payload
},
})
And you want to use the vuex store to add v-model to an input in your component.
<template>
<div>
<input type="text" v-model="get_name">
{{get_name}}
</div>
</template>
<script>
export default {
computed:{
get_name: {
get () {
return this.$store.getters.get_name
},
set (new_name) {
this.$store.commit('set_name', new_name)
}
},
}
}
</script>
Answered by roli roli
Post is based on https://stackoverflow.com/questions/40522634/can-i-pass-parameters-in-computed-properties-in-vue-js