Computed Properties in Vue

You can specify properties that will be reactively computed based on other properties. Such properties are called computed. They are located in the computed setting.

Let's look at an example. Let the user's first and last name be stored in the properties:

data() {
	return {
		name: 'john',
		surn: 'smit',
	}
}

Let's make a property full that will contain the full name with the last name:

computed: {
	full: function() {
		return this.name + ' ' + this.surn;
	}
}

Let's display the contents of our properties in the view:

<template>
	<p>{{ name }}</p>
	<p>{{ surn }}</p>
	<p>{{ full }}</p>
</template>

Computed properties change reactively. This means that if we change the first or last name, then our full property will automatically change reactively and we will immediately see the changes on the screen.

Let the property cost store the price of the product, and the property amount store the quantity of these products. Make a calculated property price, which will contain the total cost of the products (price multiplied by quantity)

Make a button that when clicked will change the cost property. Make sure that the calculated property will also change when doing this.