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

← →
↑