Lomaketietojen hakeminen tapahtuman perusteella Vuessa

Oletetaan, että meillä on painike ja syöttökenttä, johon numero syötetään. Painaen painiketta nostetaan syötetyn numeron neliö. Aloitetaan toteutus.

Ongelman ratkaisemiseksi tarvitsemme kaksi ominaisuutta. Ominaisuus num muuttuu syötettäessä tietoja syöttökenttään, ja ominaisuuteen res kirjoitamme neliöinnin tuloksen:

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

Tehdään nyt syöttökenttä, liitetään siihen ominaisuus num, tehdään painike, jota napsautettaessa suoritetaan metodi calc, ja tehdään myös kappale, johon tulos tulostetaan:

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

Kirjoitetaan metodin calc toteutus:

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

Käy niin, että heti kun metodia calc kutsutaan (ja niin tapahtuu painaessa painiketta), ominaisuuteen res kirjoitetaan tulos ja samalla se tulostuu kappaleessamme.

Annettu syöttökenttä. Annettu painike. Annettu kappale. Syöttökenttään syötetään numero. Tee niin, että painaessa painiketta kappaleeseen ilmestyy luvun neliöjuuri.

Annettu kaksi syöttökenttää. Annettu painike. Annettu kappale. Kumpaankin syöttökenttään syötetään numeroita. Tee niin, että painaessa painiketta kappaleeseen ilmestyy näiden numeroiden summa.

Annettu kaksi syöttökenttää. Annettu painike. Kumpaankin syöttökenttään syötetään jotain tekstiä. Tee niin, että painaessa painiketta ensimmäisen syöttökentän teksti tulee toiseen ja päinvastoin.

Annettu syöttökenttä, 3 kappaletta ja painike. Syöttökenttään syötetään käyttäjän koko nimi välilyönnillä erotettuna. Tee niin, että painaessa painiketta ensimmäisessä kappaleessa ilmestyy käyttäjän sukunimi, toisessa - etunimi, ja kolmannessa - patronyymi.