Ottenere i dati del modulo tramite evento in Vue

Supponiamo di avere un pulsante e un input in cui viene inserito un numero. Alla pressione del pulsante visualizziamo il quadrato del numero inserito nell'input. Iniziamo con l'implementazione.

Per risolvere il problema avremo bisogno di due proprietà. La proprietà num cambierà man mano che i dati vengono inseriti nell'input, e nella proprietà res memorizzeremo il risultato dell'elevamento al quadrato:

data() {
	return {
		num: 0,
		res: 0
	}
}

Ora creiamo l'input, colleghiamolo alla proprietà num, creiamo un pulsante che al click esegue il metodo calc, e creiamo anche un paragrafo in cui verrà visualizzato il risultato:

<template>
	<p>{{ res }}</p>
	<input v-model="num">
	<button v-on:click="calc">work</button>
</template>

Scriviamo ora l'implementazione del metodo calc:

methods: {
	calc: function() {
		this.res = this.num ** 2;
	}
}

Il risultato sarà che non appena viene chiamato il metodo calc (cosa che accade alla pressione del pulsante), nella proprietà res verrà memorizzato il risultato e contemporaneamente verrà visualizzato nel nostro paragrafo.

Dato un input. Dato un pulsante. Dato un paragrafo. Nell'input viene inserito un numero. Fai in modo che alla pressione del pulsante nel paragrafo appaia la radice quadrata di quel numero.

Dati due input. Dato un pulsante. Dato un paragrafo. In ogni input vengono inseriti numeri. Fai in modo che alla pressione del pulsante nel paragrafo appaia la somma di questi numeri.

Dati due input. Dato un pulsante. In ogni input viene inserito del testo. Fai in modo che alla pressione del pulsante il testo del primo input appaia nel secondo e viceversa.

Dato un input, 3 paragrafi e un pulsante. Nell'input viene inserito il nome completo dell'utente separato da spazi. Fai in modo che alla pressione del pulsante nel primo paragrafo appaia il cognome dell'utente, nel secondo - il nome, e nel terzo - il patronimico.