There are multiple ways in Vue to set values for the view. This includes directly binding data value to the view, using simple expressions or using filters to do simple transformations on the content. In addition to these, we can also use computed properties to obtain values based on items inside of the data model.
Computed properties in Vue are incredibly useful. So much so that unless you are looking to trigger a function after an event, such as a click event, you should probably analyse whether your function can sit inside of the computed property before looking at the methods property. The reason being that the calculations made inside of computed properties are cached and will only update when needed.
So let’s fix that by going through three real-life use cases for Vue computed properties!
So the first example we will tackle is likely the most complex of the three that we will be tackling today. So let’s get the hard stuff out of the way, because it’s also likely to be the most useful for you!
In our example, we have an eCommerce site. We will be storing all of our items inside of an item array which sits inside of our data() function (this is all fairly standard practice when using Vue components). When we add items to our shopping cart, we need to be able to add the entire item object into our cart. So an example item that gets added into our cart would look like this:
Now considering that this example is focused around simply getting the total price, we could have just added the price from this item object. But in reality, that wouldn’t be very useful, because our shopping cart wouldn’t actually know what items have been added.
So what we want to happen here is that every time an item gets added to the shopping cart, we want Vue to programmatically figure out the total price. This is where our computed properties come into play!
Let’s check our example code, then we’ll explain what is going on:
So we first run the map() function on our cart array which returns a new array that just has the prices of each item. We then immediately call the reduce() function which adds all of the values together and returns the total value.
But how does Vue know to run this every time an item gets added or removed from the cart?
Well, in our example, whenever an item gets added to the cart (by clicking on a button next to each item that says ‘Add To Cart’, the button has a click event attached to it which fires a function called updateCart(), which looks like this:
Now this example, along with the third example are going to be a little more traditional, and more in line with how you would typically see computed properties being used. Let’s take an example where we have a database full of users and all of this is being loaded into our data() function.
Our data structure has a name_first and a name_last value and we want to find an efficient way to concatenate these two together and show it on our page. To make it easier to visualise, this is what our user object could look like:
We’ve managed to go through three different, but real-life useable examples of how computed properties can be used in Vue to efficiently take care of updating data. Now that you know how to use computed properties, go and build lots of cool things!
Be sure to share, comment and like this post and let me know what awesome things you have been building in Vue!