The data object in Vue is great for storing and retrieving data directly, however, there may be times where you want to manipulate the data before outputting it in your applications. We can do that using the computed object in Vue. Using this technique, we are able to start adhering to the MVVM (Model-View-ViewModel) methodology.
MVVM is a software architectural pattern where you separate out various parts of your application into distinct sections. The Model (or data) is your raw data input - be it from an API, database, or hardcoded data values. In the context of Vue, this is typically the data object we used earlier.
The view is the frontend of your application. This should just be used for outputting the data from the Model, and should not contain any logic or data manipulation, with the exception of some unavoidable if statements. For the Vue applications, this is all the code placed within the <div id="app"></div> tags.
The ViewModel is the bridge between the two. It allows you to manipulate the data from the Model before it is output by the view. Examples of this could range from changing a string to uppercase or prefixing a currency symbol, up to filtering out discounted products from a list or calculating the total value of a field across an array. In Vue, this is where the computed object comes in.
The computed object can have as many properties as required - however, they must be functions. These functions can utilize data already on the Vue instance and return a value, be it a string, number, or array that can then be used in the view.
The first step is to create a computed object within our Vue application. In this example, we are going to use a computed value to convert our string to lowercase, so set the value of message back to a string:
const app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
computed: {
}
});
The next step is to create a function inside the computed object. One of the hardest parts of development is naming things - make sure the name of your function is descriptive. As our application is quite small and our manipulation basic, we'll name it messageToLower:
const app = new Vue({
el: '#app',
data: {
message: 'HelLO Vue!'
},
computed: {
messageToLower() {
return 'hello vue!';
}
}
});
In the preceding example, I've set it to return a hardcoded string, which is a lowercased version of the contents of the message variable. Computed functions can be used exactly as you would use a data key in the view. Update the view to output {{ messageToLower }} instead of {{ message }} and view the result in your browser.
There are a few issues with this code, however. Firstly, if the value of messageToLower was being hardcoded, we could have just added it to another data property. Secondly, if the value of message changes, the lowercase version will now be incorrect.
Within the Vue instance, we are able to access both data values and computed values using the this variable - we'll update the function to use the existing message value:
computed: {
messageToLower() {
return this.message.toLowerCase();
}
}
The messageToLower function now references the existing message variable and, using a native JavaScript function, converts the string to lower case. Try updating the message variable in your application, or in the JavaScript console, to see it update.
Computed functions are not just limited to basic functionality - remember, they are designed to remove all logic and manipulations from the view. A more complex example might be the following:
const app = new Vue({
el: '#app',
data: {
price: 25,
currency: '$',
salesTax: 16
},
computed: {
cost() {
// Work out the price of the item including
salesTax
let itemCost = parseFloat(
Math.round((this.salesTax / 100) *
this.price) + this.price).toFixed(2);
// Add text before displaying the currency and
amount
let output = 'This item costs ' +
this.currency + itemCost;
// Append to the output variable the price
without salesTax
output += ' (' + this.currency + this.price +
' excluding salesTax)';
// Return the output value
return output;
}
}
});
Although this might seem advanced at first glance, the code is taking a fixed price and calculating what it would be with sales tax added. The price, salesTax, and currency symbol are all stored as values on the data object and accessed within the cost() computed function. The view outputs {{ cost }}, which produces the following:
This item costs $29.00 ($25 excluding sales tax)
Computed functions will recalculate and update if any data is updated, by either the user or the application itself. This allows for our function to dynamically update based on the price and salesTax values. Try one of the following commands in the console in your browser:
app.salesTax = 20 app.price = 99.99
The paragraph and prices will update instantly. This is because computed functions are reactive to the data object and the rest of the application.