Proprietà Computate in Vue

È possibile impostare proprietà che verranno calcolate in modo reattivo in base ad altre proprietà. Queste proprietà sono chiamate proprietà computate. Si trovano nell'opzione computed.

Vediamo un esempio. Supponiamo che nelle proprietà siano memorizzati il nome e il cognome dell'utente:

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

Creiamo una proprietà full, che conterrà il nome completo con il cognome:

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

Visualizziamo nel template il contenuto delle nostre proprietà:

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

Le proprietà computate cambiano in modo reattivo. Ciò significa che se cambiamo il nome o il cognome, allora la nostra proprietà full cambierà automaticamente in modo reattivo e vedremo immediatamente le modifiche sullo schermo.

Supponiamo che nella proprietà cost sia memorizzato il prezzo di un prodotto, e nella proprietà amount - la quantità di questi prodotti. Crea una proprietà computata price, che contenga il costo totale dei prodotti (prezzo moltiplicato per la quantità)

Crea un pulsante, il cui click cambierà la proprietà cost. Verifica che anche la proprietà computata cambi di conseguenza.