How to Pass Parameters in Computed Properties in 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://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

Vue.js : passing item as parameter to computed prop in v-for, returning child array sorted ?

A computed property don't get any params. In your case, the prop entityList() must be a method :

methods : {
    entityList(item) {
      return orderby(item.entities, ['entity', 'value'], ['asc', 'asc'])
    },
},

https://v2.vuejs.org/v2/guide/computed.html

How to pass a computed parameter from one Vue component to another?

What you could do is store the developmentCost value in the Vue root component and pass it down as a prop to the result-output component.

You would then use a watcher and v-model to synchronise the value.

Vue.component('cost-input', {
  data: function () {
    return {
      durationDays: "10",
      costRate: "160",
      numberOfExperts: "1"
    }
  },
  computed: {
    developmentCost: function(e) {
      let dc = this.durationDays * this.costRate * 8 * this.numberOfExperts; 
      //return currencyFormat(c);
      //console.log(c);
      return dc;
    }
  },
  watch: {
    developmentCost: {
      handler: function (value) {
        this.$emit("input", value);
      },
      immediate: true
    }
  },
  template: ...
})

Vue.component('result-output', {
  props: ["developmentCost"],
  data: function () {
    return {
      revenuesFirst: ""
   }
  },
  computed: {
    calculatedProfits: function(e) {
      let cp = this.revenuesFirst - this.developmentCost; 
      //return currencyFormat(c);
      //console.log(cp);
      return cp;
    }
  },
  template: ...
})

let app = new Vue({
  el: "#app",
  data: {
    developmentCost: ""
  }
});

<cost-input v-model="developmentCost"></cost-input>
...
<result-output :development-cost="developmentCost"></result-output>

v-model documentation

watchers

Here is the codepen with the updated code

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

Is it possible to pass an argument to a computed property that is used for class and style bindings?

If you need arguments then you want to write a method, not a computed property.

<button :class="styleMinusButton(i)">...</button>

methods: {
  styleMinusButton(i) {
    const { travelers, curOcc, minOcc } = this
    return {
      'uk-disabled uk-button-default': travelers[i] == 0 || (curOcc !== 1 && curOcc <= minOcc),
      'uk-button-primary': travelers[i] > 0 && (curOcc > minOcc || curOcc >= minOcc && travelers[i] === 1 && travelers[i+1] !== 1 && travelers[i+2] !== 1 && travelers[i-1] !== 1 && travelers[i-2] !== 1)
    }
  }
}

Can I pass a computed property and an object inside a v-bind:class in Vuejs?

class value is an expression. If it doesn't make sense in raw JavaScript, it doesn't make sense there. Here comma operator is used, so the expression evaluates to myComputedProperty, and {mycss: isActive} part is discarded.

The format for combined class value is documented:

:class="[{mycss: isActive}, myComputedProperty]"

Since computed values are involved, defining the whole class object as a computed will result in cleaner template code.

How to change computed property from input

sample https://codesandbox.io/s/zen-sunset-ouoktf?file=/src/App.vue

define inputValue as data

inputValue : this.$store.getters.inputValue

and set a watcher for it .

 watch: {
    inputValue: {
      handler: function (val) {
        console.log(val); // commit changes to store <---
      },
      deep: true,
    },
  },

test it and let me know it is working or not

---

Related Topics