Как заставить перемапить данные внутри компонента Vue?

Всем привет!

Допустим я получаю такой массив с сервера: const persons = [{ name: 'Вася', job: 'Менеджер', age: 45 }, { name: 'Петя', job: 'Логист', age: 40 }

Далее я делаю v-for данного массива и передаю пропсом каждый элемент внутрь компонента <person v-for="person in persons" :key="person.name" :person="person"/>

Далее внутри компонента в хуке created я делаю маппинг для person, для того чтобы потом уже смапенные, красивые данные вставить в разметку, то есть в created делаю что-то типо:

this.mappedPerson = person.map((item) => { ...item, name: 'Прекрасная должность + person.job', age: 'Прекрасный возраст + person.job', }

Ну и далее эти данные вставляю в разметку. Все вроде ок. Я получил сырые данные в компонент, при создании компонента смаппил эти данные в нужный себе формат и вывел пользователю.

А далее я беру и редактирую данные своего person, отправляю запрос на сервер, сервер мне возвращает обновленный объект person, я его в store с помощью commit добавляю в список person, но в компоненте ничего не происходит! Я жду, что так как данные person изменились, произойдет перерендер компонента, в который я передаю этот person, соответственно в моем компоненте person снова вызовется маппинг данных. Но компонент не перерендеривается, created не срабатывает.

Как в таких ситуациях заставить весь компонент заново смаппить переданные ему пропсы?


Ответы (0 шт):