Lidhja e dyanshme e të dhënave me inputet në Vue

Tani do të mësojmë të punojmë me inputet në framework-un Vue. Me ndihmën e tyre do të shtojmë të dhëna në mënyrë reaktive në faqe. Le të fillojmë. Le të kemi një input:

<template>
	<input>
</template>

Le të kemi gjithashtu një pronë message:

data() {
	return {
		message: 'hello',
	}
}

Ne mund ta lidhim këtë pronë dhe inputin në mënyrë të tillë që ndryshimi i cilësdo prej tyre të çojë në ndryshimin e tjetrit. Kjo bëhet me ndihmën e direktivës v-model, ku specifikohet pronë e lidhur me inputin.

Le ta lidhim me inputin tonë pronën message:

<template>
	<input v-model="message">
</template>

Pas nisjes së kodit në input do të jetë teksti i pronës message. Dhe nëse redaktohen të dhënat në input - pronë do të ndryshojë gjithashtu në mënyrën përkatëse. Për ta parë këtë, le të shfaqim përmbajtjen e futur në input diku në një paragraf:

<template>
	<input v-model="message">
	<p>{{ message }}</p>
</template>

Jepet një input. Bëni që teksti i futur në input të shfaqet menjëherë në paragrafin nën të.

Modifikoni detyrën e mëparshme në mënyrë që teksti të shfaqet në registër të epërm.

Jepet një input. Le të futet një numër në të. Bëni që në paragraf me kalimin e kohës të shfaqet katrori i numrit të futur.