кода https://github.com/mindminimal/Test-communication-Vue-components
Быстрая ремарка: это тестовое задание с курса udemy по vue.js.
Суть задания такова, что есть массив обьектов (серверов) в компоненте Servers.vue (src/components/Server/Servers.vue) вида:
servers: [
{ id: 1, status: 'Normal'},
{ id: 2, status: 'Critical'},
{ id: 3, status: 'Unknown'},
{ id: 4, status: 'Normal'}
]
Необходимо каждый "сервер" выгрузить в свой компонент (для этого был создан компонент Server.vue (использовался v-for и передача параметров внутрь, сервер и индекс. ID сервера вывожу в этом же компоненте.) (по сути, дочерний компонент Servers). При клике на каждый сервер необходимо было передать в компонент ServerDetails статус сервера. В компоненте ServerDetails - создать кнопку, которая бы "ресетила" статус выбранного сервера на Normal. Собственно по реализации, в компонент Server я передавал сам обьект с массива и его индекс. (Индекс я посчитал передать нужным, т.к. необходимо было сменить статус обьекта в массиве, а учитывая что, для изменения данных в дочернем элементе необходимо изменить их в родительском - подумал что это "лучший" вариант, данные передавал через eventBus (да, тут говорили за vuex но до него не дошли еще)). В ServerDetails я ловлю индекс и собщение, при клике на кнопку - событие, которое передает "выбранный" индекс в родительский компонент Server где изменяет данные в массиве. Возможно сильно запутано обьяснил, но может ли кто подсказать, насколько данное решение адекватное и можно ли его как-то улучшить и в коде что подправить?
ServerDetails.vue нигде не используется?
Может кто еще взглянуть?
Обсуждают сегодня