Vue හි දත්ත එකතු කිරීම සඳහා සංරචකය

දැන් අපි නව පරිශීලකයින් එකතු කිරීම සඳහා පෝරමය ක්‍රියාත්මක කරමු. මෙම පෝරමය අපි වෙනම සංරචකයක ආකාරයෙන් සාදන්නෙමු. ක්‍රියාත්මක කිරීම ආරම්භ කරමු. පළමුව, මාපිය සංරචකයේ පරිශීලකයෙකු එකතු කිරීම සඳහා ක්‍රමයක් සාදන්න:

methods: {
	add(name, surn) {
		let id = this.users.length + 1;
		
		this.users.push({
			id,
			name,
			surn
		});
	}
}

මාපිය සංරචකයේ නිරූපණයේ උප සංරචකය සම්බන්ධ කරමු:

<template>
	<UserForm @add="add" />
</template>

උප සංරචකයේ ආදාන පාලනය සඳහා ගුණාංග සාදමු:

data() {
	return {
		newName: '',
		newSurn: '',
	}
}

උප සංරචකයේ දත්ත සුරැකීම සඳහා ක්‍රමයක් සාදමු:

methods: {
	save() {
		this.$emit('add', this.newName, this.newSurn);
	}
}

උප සංරචකයේ නිරූපණ සාදමු:

<template>
	<input v-model="newName">
	<input v-model="newSurn">
	
	<button @click="save">
		save
	</button>
</template>

නව කම්කරුවෙකු එකතු කිරීම සඳහා පෝරමය ක්‍රියාත්මක කරන්න.