Vue හි දත්ත සංරචක නැවත සකස් කිරීම
දැන් අපි අපගේ දරු සංරචකවල දත්ත සංස්කරණය කිරීම ක්රියාත්මක කරමු.
පළමුව, මූල සංරචකයේ එහි id අනුව පරිශීලකයා වෙනස් කිරීමේ ක්රමයක් සාදමු:
methods: {
change(id, name, surn) {
this.users = this.users.map((user) => {
if (user.id === id) {
user.name = name;
user.surn = surn;
}
return user;
});
}
}
අපි සංරචක චක්රයක් තුළ සාදමු, ඒවාට නම, අනුනම, id
සහ වෙනස් කිරීමේ ක්රමය පරාමිතියක් ලෙස ලබා දෙමු:
<template>
<User
v-for ="user in users"
:id ="user.id"
:name ="user.name"
:surn ="user.surn"
:key ="user.id"
@change="change"
/>
</template>
දරු සංරචකයේ emits සැකසුමේ විමෝචනය කරන සිදුවීම ලියන්න:
props: {
id: Number,
name: String,
surn: String,
},
emits: ['change'],
දැන් දරු සංරචකයේ, සංරචකයේ ප්රකාරය, පෙන්වීම හෝ සංස්කරණය නියම කරන ගුණාංගයක් සාදමු:
data() {
return {
isEdit: false,
}
}
සංස්කරණය සඳහා ආදාන ක්රියාකාරීත්වය සහය දැක්වීම සඳහා ගුණාංග ද සාදමු:
data() {
return {
isEdit: false,
newName: '',
newSurn: '',
}
}
මෙම ගුණාංගවල ආරම්භක අගයන් ප්රොප්ස් වලින් ලබා ගන්නා ආකාරයට සකසමු:
data() {
return {
isEdit: false,
newName: this.name,
newSurn: this.surn,
}
}
සංස්කරණ ප්රකාරය ආරම්භ කරන ක්රමයක් සාදමු:
methods: {
edit() {
this.isEdit = true;
}
}
සංස්කරණය කළ දත්ත සුරැකීමට හැකි වන පරිදි, එමඟින් සංස්කරණ ප්රකාරය අක්රිය කරන ක්රමයක් සාදමු:
methods: {
save() {
this.isEdit = false;
this.$emit('change', this.id, this.newName, this.newSurn);
}
}
දරු සංරචකයේ නිරූපණය සාදමු:
<template>
<template v-if="!isEdit">
{{ name }}
{{ surn }}
<button @click="edit">
edit
</button>
</template>
<template v-else>
<input v-model="newName">
<input v-model="newSurn">
<button @click="save">
save
</button>
</template>
</template>
Employee සංරචකයේ දත්ත සංස්කරණය කිරීම ක්රියාත්මක කරන්න.
