Реактивное редактирование данных компонента в 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.