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.
HTML
< 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:
Contact Us