# Форма для редактирования массива объектов в Vue

Давайте теперь реализуем редактирование элементов массива объекта. Сделаем для этого кнопку, по нажатию на которую в пункте списка будет появляться форма для редактирования. После заполнения формы мы будем жать на кнопку сохранения и изменения будут сохраняться в массиве, а форма будет убираться.

Приступим к реализации. В массиве объектов каждому объекту мы должны добавить еще одно поле, содержащее состояние юзера, показ или редактирование:

`data() { return { users: [ { id: 1, name: 'name1', surn: 'surn1', isEdit: false, }, { id: 2, name: 'name2', surn: 'surn2', isEdit: false, }, { id: 3, name: 'name3', surn: 'surn3', isEdit: false, }, ] } }`

Выведем содержимое массива в виде списка:

`<template> <ul> <li v-for="user in users" :key="user.id"> {{ user.name }} {{ user.surn }} </li> </ul> </template>`

Теперь разделим режим показа и режим редактирования:

`<template> <ul> <li v-for="user in users" :key="user.id"> <template v-if="!user.isEdit"> {{ user.name }} {{ user.surn }} <button @click="edit(user)"> edit </button> </template> <template v-else> <input v-model="user.name"> <input v-model="user.surn"> <button @click="save(user)"> save </button> </template> </li> </ul> </template>`

Реализуем методы:

`methods: { edit(user) { user.isEdit = true; }, save(user) { user.isEdit = false; }, }`

Модифицируйте задачу предыдущего урока так, чтобы появилась колонка с ссылками для редактирования каждого работника.

← →
↑