Vue හි වස්තූන්ගේ අරාව සංස්කරණය කිරීම සඳහා පෝරමය

දැන් අපි වස්තුවක අරාවේ මූලද්රව්ය සංස්කරණය කිරීම ක්‍රියාත්මක කරමු. මේ සඳහා අපි බොත්තමක් සාදන්නෙමු, එය ක්ලික් කළ විට ලැයිස්තු අයිතමයේ සංස්කරණය කිරීම සඳහා පෝරමයක් දිස්වනු ඇත. පෝරමය පුරවා ඇති පසු, අපි සුරැකීමේ බොත්තම ක්ලික් කරන අතර වෙනස්කම් අරාවේ සුරකිනු ලැබේ, පෝරමය ඉවත් කරනු ලැබේ.

ක්‍රියාත්මක කිරීමට පිවිසෙමු. වස්තූන්ගේ අරාවේ සෑම වස්තුවකටම අපි තවත් ක්ෂේත්‍රයක් එකතු කළ යුතුය, එය පරිශීලක තත්වය, ප්‍රදර්ශනය හෝ සංස්කරණය අඩංගු වේ:

data() {
	return {
		users: [
			{
				id: 1,
				name: 'name1',
				surn: 'surn1',
				isEdit: false,
			},
			{
				id: 2,
				name: 'name2',
				surn: 'surn2',
				isEdit: false,
			},
			{
				id: 3,
				name: 'name3',
				surn: 'surn3',
				isEdit: false,
			},
		]
	}
}

අරාවේ අන්තර්ගතය ලැයිස්තුවක් ආකාරයෙන් ප්‍රතිදානය කරමු:

<template>
	<ul>
		<li v-for="user in users" :key="user.id">
			{{ user.name }}
			{{ user.surn }}
		</li>
	</ul>
</template>

දැන් අපි ප්‍රදර්ශන මාදිලිය සහ සංස්කරණ මාදිලිය වෙන් කරමු:

<template>
	<ul>
		<li v-for="user in users" :key="user.id">
			<template v-if="!user.isEdit">
				{{ user.name }}
				{{ user.surn }}
				<button @click="edit(user)">
					edit
				</button>
			</template>
			<template v-else>
				<input v-model="user.name">
				<input v-model="user.surn">
				<button @click="save(user)">
					save
				</button>
			</template>
		</li>
	</ul>
</template>

ක්‍රම ක්‍රියාත්මක කරමු:

methods: {
	edit(user) {
		user.isEdit = true;
	},
	save(user) {
		user.isEdit = false;
	},
}

කරුණාකර පෙර පාඩමේ කාර්යය වෙනස් කරන්න එමගින් සෑම කර්මාන්තකරුවෙකුම සංස්කරණය කිරීම සඳහා සබැඳි තීරුවක් දිස්වන පරිදි.