Can I pass parameters in computed properties in Vue.Js Can I pass parameters in computed properties in Vue.Js vue.js vue.js

Can I pass parameters in computed properties in Vue.Js


Most probably you want to use a method

<span>{{ fullName('Hi') }}</span>methods: {  fullName(salut) {      return `${salut} ${this.firstName} ${this.lastName}`  }}

Longer explanation

Technically you can use a computed property with a parameter like this:

computed: {   fullName() {      return salut => `${salut} ${this.firstName} ${this.lastName}`   }}

(Thanks Unirgy for the base code for this.)

The difference between a computed property and a method is that computed properties are cached and change only when their dependencies change. A method will evaluate every time it's called.

If you need parameters, there are usually no benefits of using a computed property function over a method in such a case. Though it allows you to have a parametrized getter function bound to the Vue instance, you lose caching so not really any gain there, in fact, you may break reactivity (AFAIU). You can read more about this in Vue documentation https://vuejs.org/v2/guide/computed.html#Computed-Caching-vs-Methods

The only useful situation is when you have to use a getter and need to have it parametrized. For instance, this situation happens in Vuex. In Vuex it's the only way to synchronously get parametrized result from the store (actions are async). Thus this approach is listed by official Vuex documentation for its gettershttps://vuex.vuejs.org/guide/getters.html#method-style-access


You can use methods, but I prefer still to use computed properties instead of methods, if they're not mutating data or do not have external effects.

You can pass arguments to computed properties this way (not documented, but suggested by maintainers, don't remember where):

computed: {   fullName: function () {      var vm = this;      return function (salut) {          return salut + ' ' + vm.firstName + ' ' + vm.lastName;        };   }}

EDIT: Please do not use this solution, it only complicates code without any benefits.


Well, technically speaking we can pass a parameter to a computed function, the same way we can pass a parameter to a getter function in vuex. Such a function is a function that returns a function.

For instance, in the getters of a store:

{  itemById: function(state) {    return (id) => state.itemPool[id];  }}

This getter can be mapped to the computed functions of a component:

computed: {  ...mapGetters([    'ids',    'itemById'  ])}

And we can use this computed function in our template as follows:

<div v-for="id in ids" :key="id">{{itemById(id).description}}</div>

We can apply the same approach to create a computed method that takes a parameter.

computed: {  ...mapGetters([    'ids',    'itemById'  ]),  descriptionById: function() {    return (id) => this.itemById(id).description;  }}

And use it in our template:

<div v-for="id in ids" :key="id">{{descriptionById(id)}}</div>

This being said, I'm not saying here that it's the right way of doing things with Vue.

However, I could observe that when the item with the specified ID is mutated in the store, the view does refresh its contents automatically with the new properties of this item (the binding seems to be working just fine).