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