Propiedades Computadas en Vue

Se pueden definir propiedades que se calcularán reactivamente en base a otras propiedades. Estas propiedades se denominan computadas. Se ubican en la configuración computed.

Veamos un ejemplo. Supongamos que en las propiedades se almacena el nombre y apellido del usuario:

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

Creemos una propiedad full que contendrá el nombre completo con el apellido:

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

Mostremos en la vista el contenido de nuestras propiedades:

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

Las propiedades computadas cambian reactivamente. Esto significa que si cambiamos el nombre o el apellido, entonces nuestra propiedad full cambiará automáticamente de forma reactiva e inmediatamente veremos los cambios en la pantalla.

Supongamos que en la propiedad cost se almacena el precio del producto, y en la propiedad amount - la cantidad de estos productos. Crea una propiedad computada price que contendrá el costo total de los productos (precio multiplicado por la cantidad)

Crea un botón, cuyo clic cambie la propiedad cost. Verifica que la propiedad computada también cambie cuando esto ocurra.