364

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 possible:

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

Where computed property takes an argument and returns the desired output. However, when I try this, I am getting this error:

vue.common.js:2250 Uncaught TypeError: fullName is not a function(…)

Should I be using methods for such cases?

1
  • 13
    No, you can't pass parameters to computed properties. Yes, using methods is the easiest way of doing it.
    – nils
    Commented Nov 10, 2016 at 8:41

13 Answers 13

476

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://v2.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 getters https://vuex.vuejs.org/guide/getters.html#method-style-access

3
  • How would you use the computed function though. I mean where would you pass the param in. Not working for me.
    – Corné
    Commented Feb 18, 2022 at 1:20
  • You need to pass the param where you are calling your computed prop, most likely in your template: {{ fullName('Joe') }}.
    – Theiaz
    Commented Feb 22, 2022 at 7:43
  • But will using methods be reactive? Also, the this, is that the referencing the instance of the entire component or only the component that is using the computed property? In my case, the goal is to activate/apply a css class based on selection. So if an item gets selected, a comparison has to be made with the current/previous selection to the items id. Meaning, at most, two reactive events will have to take place: unselecting the previous item and selecting the new item Commented Dec 16, 2022 at 14:11
51

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;  
      };
   }
}

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

8
  • It will be really helpful if you can provide a reference. This should work.
    – Saurabh
    Commented Jan 5, 2017 at 3:18
  • @saurabh sorry it was a solution for a not really descriptive issue in github, and i can't find it right now...
    – Unirgy
    Commented Jan 5, 2017 at 4:13
  • This works for me, but the only thing I'm not a fan of is the fact that it returns a function rather than the actual property, so the VueJS devtools doesn't show the results anywhere. I'm not sure if that's typical for computed properties, but it makes troubleshooting a little harder. Commented Jan 19, 2017 at 19:39
  • 6
    How does it handle caching? Will it work properly when the parameter changes?
    – damienix
    Commented Apr 5, 2017 at 14:44
  • 3
    I don't believe it would cache anything inside the return function. The difference from methods would be purely of convention (methods have effect, computed are only for retrieval)
    – Unirgy
    Commented Jun 22, 2017 at 23:36
16

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).

9
  • woah so this worked for me , not using vuex . would also like to know if this is a legit way to do computed properties.
    – yeahdixon
    Commented Apr 19, 2018 at 15:17
  • 5
    Whilst this does work, it essentially treats the computed property the same as a method. i.e. it loses the caching benefits of a computed property. So, there is no actual gain using this over a method. "Note that getters accessed via methods will run each time you call them, and the result is not cached." See vuex.vuejs.org/en/getters.html
    – James
    Commented Apr 27, 2018 at 5:25
  • @james.brndwgn but I'm pretty sure methods won't be rerun when the underlying data is changed. That's all I'm really looking for.
    – Alex
    Commented Jun 24, 2018 at 14:03
  • @Alex then you should be using a watcher. vuejs.org/v2/guide/computed.html#Watchers
    – James
    Commented Jun 25, 2018 at 0:55
  • @james.brndwgn I'd much rather use a computed property than a watcher if possible. I was only taking issue with your statement: "So, there is no actual gain using this over a method." as there is a significant difference even without caching.
    – Alex
    Commented Jun 26, 2018 at 17:10
10

I don't see the an answer for the Vue3 and/or using composition API, so here is my bit (,because I always forget how to do that).

You can make computed to accept arguments by wrapping it in another function, like this:

const firstName = ref("John");
const lastName = ref("Doe");

const fullName = (salut: string) =>
  computed(() =>
    `${salut} ${firstName.value} ${lastName.value}`);

If you want to use Pinia (Passing arguments to getters) for state management, you can use this computed as a getter:

// In component's setup function

const store = useStore();
const fullName = store.fullName("Hello"); // ComputedRef<string> 
console.log(fullName) // "Hello John Doe"

9
computed: {
  fullName: (app)=> (salut)=> {
      return salut + ' ' + app.firstName + ' ' + app.lastName    
  }
}

when you want use

<p>{{fullName('your salut')}}</p>
0
6

You can also pass arguments to getters by returning a function. This is particularly useful when you want to query an array in the store:

getters: {
  // ...
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}
store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }

Note that getters accessed via methods will run each time you call them, and the result is not cached.

That is called Method-Style Access and it is documented on the Vue.js docs.

1
  • These are Vuex docs, not Vue docs. Commented Apr 25, 2022 at 18:24
6

[Vue2] Filters are a functionality provided by Vue components that let you apply formatting and transformations to any part of your template dynamic data.

They don’t change a component’s data or anything, but they only affect the output.

Say you are printing a name:

new Vue({
  el: '#container',
  data() {
    return {
      name: 'Maria',
      lastname: 'Silva'
    }
  },
  filters: {
    prepend: (name, lastname, prefix) => {
      return `${prefix} ${name} ${lastname}`
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="container">
  <p>{{ name, lastname | prepend('Hello') }}!</p>
</div>

Notice the syntax to apply a filter, which is | filterName. If you're familiar with Unix, that's the Unix pipe operator, which is used to pass the output of an operation as an input to the next one.

The filters property of the component is an object. A single filter is a function that accepts a value and returns another value.

The returned value is the one that’s actually printed in the Vue.js template.

Filters were removed in Vue3

1
  • 3
    As a side-note, filters were removed in Vue3, so probably not the best way to go here.
    – kissu
    Commented Dec 27, 2021 at 11:30
5

You can pass parameters but either it is not a vue.js way or the way you are doing is wrong.

However there are cases when you need to do so.I am going to show you a simple example passing value to computed property using getter and setter.

<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'.

Below there is a common use case when computed is used with getter and setter. Say you have the follow 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 in your component you want to add v-model to an input but using the vuex store.

<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>
1
  • Doesn't this cause a cyclic loop if the mutation is triggered by the same control? Commented Dec 16, 2022 at 14:16
4

I'd like to first reiterate the previous caveats that using computed (which is cached) with a parameter simply makes the computed not cached, effectively just making it a method.

However, that being said, here are all the variations that I can think of which may have edge-cases for use. If you cut & paste this into a demo app it should be clear what is going on:

<template>
  <div>

    <div style="background: violet;"> someData, regularComputed: {{ someData }}, {{ regularComputed }} </div>
    <div style="background: cornflowerblue;"> someComputedWithParameterOneLine: {{ someComputedWithParameterOneLine('hello') }} </div>
    <div style="background: lightgreen;"> someComputedWithParameterMultiLine: {{ someComputedWithParameterMultiLine('Yo') }} </div>
    <div style="background: yellow"> someComputedUsingGetterSetterWithParameterMultiLine: {{ someComputedUsingGetterSetterWithParameterMultiLine('Tadah!') }} </div>

    <div>
      <div style="background: orangered;"> inputData: {{ inputData }} </div>
      <input v-model="inputData" />
      <button @click="someComputedUsingGetterSetterWithParameterMultiLine = inputData">
        Update 'someComputedUsingGetterSetterWithParameterMultiLine' with 'inputData'.
      </button>
    </div>

    <div style="background: red"> newConcatenatedString: {{ newConcatenatedString }} </div>

  </div>
</template>

<script>

  export default {

    data() {
      return {
        someData: 'yo',
        inputData: '',
        newConcatenatedString: ''
      }
    },

    computed: {

      regularComputed(){
        return 'dude.'
      },

      someComputedWithParameterOneLine(){
        return (theParam) => `The following is the Parameter from *One* Line Arrow Function >>> ${theParam}`
      },

      someComputedWithParameterMultiLine(){
        return (theParam) => {
          return `The following is the Parameter from *Multi* Line Arrow Function >>> ${theParam}`
        }
      },

      // NOTICE that Computed with GETTER/SETTER is now an Object, that has 2 methods, get() and set(), so after the name of the computed we use : instead of ()
      // thus we do: "someComputedUsingGetterSetterWithParameterMultiLine: {...}" NOT "someComputedUsingGetterSetterWithParameterMultiLine(){...}"
      someComputedUsingGetterSetterWithParameterMultiLine: {
        get () {
          return (theParam) => {
            return `As part of the computed GETTER/SETTER, the following is inside get() which receives a Parameter (using a multi-line Arrow Function) >>> ${theParam}`
          }
        },
        set(newSetValue) {
          console.log('Accessing get() from within the set()', this.someComputedUsingGetterSetterWithParameterMultiLine('hello from inside the Setter, using the Getter.'))
          console.log('Accessing newSetValue in set() >>>>', JSON.stringify(newSetValue))
          this.newConcatenatedString = `**(1)${this.someComputedUsingGetterSetterWithParameterMultiLine('hello from inside the Setter, using the Getter.')}**  This is a concatenation of get() value that had a Parameter, with newSetValue **(2)${newSetValue}** that came into the set().`
        }
      },

    },

  }

</script>
2

Computed could be considered as a function. So for an example on validation you could clearly do something like :

    methods: {
        validation(attr){
            switch(attr) {
                case 'email':
                    const re = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
                    return re.test(this.form.email);
                case 'password':
                    return this.form.password.length > 4
            }
        },
        ...
    }

Which you'll be using like :

  <b-form-input
            id="email"
            v-model="form.email"
            type="email"
            :state="validation('email')"
            required
            placeholder="Enter email"
    ></b-form-input>

Just keep in mind that you will still miss the caching specific to computed.

0

Yes methods are there for using params. Like answers stated above, in your example it's best to use methods since execution is very light.

Only for reference, in a situation where the method is complex and cost is high, you can cache the results like so:

data() {
    return {
        fullNameCache:{}
    };
}

methods: {
    fullName(salut) {
        if (!this.fullNameCache[salut]) {
            this.fullNameCache[salut] = salut + ' ' + this.firstName + ' ' + this.lastName;
        }
        return this.fullNameCache[salut];
    }
}

note: When using this, watchout for memory if dealing with thousands

0

I didn't see a clear Vue 3 example so I am adding one from an app I worked on. You call a method first that then returns a computed value. So the method will be called when Vue re-renders but then the cached computed value is returned and only executed if the reactive input variables change.

<script setup>
import { computed, ref } from 'vue'

const itemOne = ref(1);
const itemTwo = ref(2);

const getItemDoubled: (key) => {
    return computed(()=> item[key].value * 2);
}
</script>

<template>
    <p>get dynamic name computed value: {{ getItemDoubled('One') }}
    <p>get dynamic name computed value: {{ getItemDoubled('Two') }}
</template
0

You need to be careful with the vue/no-side-effects-in-computed-properties ESlint rule and not making any inside of computed.

Meanwhile, if you're looking towards having a memoization kind of approach, you can give a read to this article or useMemoize from Vueuse.

Or even v-memo since Vue3.2.

Not the answer you're looking for? Browse other questions tagged or ask your own question.