Вычисляемые свойства в Vue

Можно задавать свойства, которые будут реактивно вычисляться на основе других свойств. Такие свойства называются вычисляемыми. Они располагаются в настройке computed.

Давайте посмотрим на примере. Пусть в свойствах хранится имя и фамилия юзера:

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

Давайте сделаем свойство full, которое будет содержать полное имя с фамилией:

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

Выведем в представлении содержимое наших свойств:

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

Вычисляемые свойства изменяются реактивно. Это значит, что если мы поменяем имя или фамилию, то и наше свойство full автоматически реактивно изменится и мы сразу увидим изменения на экране.

Пусть в свойстве cost хранится цена продукта, а в свойстве amount - количество этих продуктов. Сделайте вычисляемое свойство price, которое будет содержать полную стоимость продуктов (цена умножить на количество)

Сделайте кнопку, клик на которую будет изменять свойство cost. Проверьте, что вычисляемое свойство также будет изменяться при этом.