How to Pass Parameters in Computed Properties in VueJS ?

In this article, we are going to learn how can we pass parameters in computed properties. The difference between a computed property and a method is that computed properties are cached, Methods are functions that can be called normal JS functions, but computed properties will be “re-calculated” anytime their dependency changes in the component.

Approach

• We are going to use these for passing the parameters in computed properties:
  • <template>: This is the HTML template for the Vue component. It contains a <p> tag that displays the computed value and a button that triggers the updateComputed method when clicked.
  • <script>: This is the JavaScript part of the Vue component
    • data(): This is a function that returns an object. The properties of this object are the reactive data for the component. In this case, baseValue is a reactive data
    • computed: This is an object that contains computed properties. A computed property is a property that is computed based on other reactive data properties. In this case, computedValue is a computed property that depends on baseValue. It uses the calculateValue method to calculate its value and return
    • methods: This is an object that contains methods. Methods are functions that can be called from the template. In this case, calculateValue is a method that takes a value and returns the value multiplied by 2. updateComputed is a method that updates baseValue and the computedValue computed property automatically triggers as the base value changes.
• The computedValue computed property is dependent on the baseValue data property. When baseValue changes, computedValue is automatically re-calculated.
• When you run the application (npm run dev), you'll see the computed value displayed. Clicking the "Update Base Value" button triggers the recalculation of the computed property.

Example: This example shows the implementation of the above-explained appraoch.

<template>
  <div>
      <p>Computed Property: {{ computedValue }}</p>
      <button @click="updateComputed(10)">
          Update Value
      </button>
  </div>
</template>

<script>
export default {
data() {
	return {
	baseValue: 5,
	};
},
computed: {
	computedValue() {
	// You can't pass parameters
	// directly to computed properties,
	// but you can use a method that takes
	// parameters to calculate the value.
	return this.calculateValue(this.baseValue);
	},
},
methods: {
	calculateValue(value) {
	// Perform computation based
	// on the passed parameter
	return value * 2;
	},
	updateComputed(newValue) {
	// Update the base value triggering a
	// re-calculation of computed property
	this.baseValue = newValue;
	},
},
};
</script>

Step to run the application:

npm install

npm run dev

Output: