Sehemu ya Kuongeza Data katika Vue
Sasa hebu tutekeleze fomu ya kuongeza watumiaji wapya. Tutafanya fomu hii kuwa sehemu tofauti. Tuanze utekelezaji. Kwanza, kwenye sehemu mzazi tutafanya njia ya kuongeza mtumiaji:
methods: {
add(name, surn) {
let id = this.users.length + 1;
this.users.push({
id,
name,
surn
});
}
}
Kwenye muonekano wa sehemu mzazi tutaunganisha sehemu mtoto:
<template>
<UserForm @add="add" />
</template>
Kwenye sehemu mtoto tutafanya sifa za kudhibiti viingilio:
data() {
return {
newName: '',
newSurn: '',
}
}
Kwenye sehemu mtoto tutafanya njia ya kuhifadhi data:
methods: {
save() {
this.$emit('add', this.newName, this.newSurn);
}
}
Tutafanya muonekano wa sehemu mtoto:
<template>
<input v-model="newName">
<input v-model="newSurn">
<button @click="save">
save
</button>
</template>
Tekeleza fomu ya kuongeza mfanyakazi mpya.
