Datu iegūšana no formas pēc notikuma Vue

Pieņemsim, ka mums ir poga un ievades lauks, kurā tiek ievadīts skaitlis. Noklikšķinot uz pogas, parādīsim ievadītā skaitļa kvadrātu. Sāksim realizāciju.

Lai atrisinātu uzdevumu, mums būs nepieciešamas divas īpašības. Īpašība num mainīsies, ievadot datus ievades laukā, bet īpašībā res mēs ierakstīsim kvadrātā kāpšanas rezultātu:

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

Tagad izveidosim ievades lauku, piesaistīsim tam īpašību num, izveidosim pogu, uz kuras noklikšķinot tiks izpildīta metode calc, un izveidosim arī rindkopu, kurā tiks izvadīts rezultāts:

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

Tagad uzrakstīsim metodes calc realizāciju:

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

Izrādīsies, ka, tiklīdz tiks izsaukta metode calc (tas notiks, nospiežot pogu), īpašībā res tiks ierakstīts rezultāts un vienlaikus tas tiks parādīts mūsu rindkopā.

Dots ievades lauks. Dota poga. Dota rindkopa. Ievades laukā tiek ievadīts skaitlis. Pārliecinieties, ka, nospiežot uz pogas, rindkopā parādās šī skaitļa kvadrātsakne.

Doti divi ievades lauki. Dota poga. Dota rindkopa. Katrā ievades laukā tiek ievadīti skaitļi. Pārliecinieties, ka, nospiežot uz pogas, rindkopā parādās šo skaitļu summa.

Doti divi ievades lauki. Dota poga. Katrā ievades laukā tiek ievadīts kāds teksts. Pārliecinieties, ka, nospiežot uz pogas, pirmā ievades lauka teksts parādās otrajā un otrkārt.

Dots ievades lauks, 3 rindkopas un poga. Ievades laukā tiek ievadīts lietotāja Vārds Uzvārds atdalīts ar atstarpi. Pārliecinieties, ka, nospiežot uz pogas, pirmajā rindkopā parādās lietotāja uzvārds, otrajā - vārds, bet trešajā - otrais vārds.