Передача данных в компоненты vue с помощью шины событий

#javascript #vuejs #события

Начал изучать vue столкнулся с проблемой,есть сестринские компоненты, их 4 штуки,
при выборе в селекте "Добавить новую организацию" (компонент CompanyRegistration) вся
информация введеная пользователем отправляется с помощью EventBus в методе add_company_to_hash.
Затем, название организации и форма добавляются в селект (компонент PersonalAccount,
в массив companies: []),при выборе организации ,вся информация должна передаваться
в компонент AllCompanies. Но вот тут и возникла проблема, что информация появляется
в компоненте (передаю я так же с помощью EventBus) , только когда выбираю второй! раз
в селекте строчку с компанией, почему так не могу понять. Прикрепляю код
https://codepen.io/anon/pen/aPjjKx
    

Ответы

Ответ 1

В твоей ситeации не нужно использовать EventВus. Достаточно нативной реактивность VueJs.

Если у тебя есть объект с массивом организаций то тебе надо просто передать его во
все места где он используется, и при обновлении он будет обновлённым во всех компонентах.
Все шаблоны зависящие от этого массива будут автоматически перерисованы.

В твоей ситуации лучше всего использовать Vuex для хранения общего состояния приложения.
То есть организации надо поместить внутрь контейнера Vuex.

Если без vuex просто помести его в рутовый компонент, к нему есть доступ у любого
дочернего компонента через el.$root.

При добавлении новой организации через organizations.push(...) всё шаблоны зависящие
от этого массива будут перерисованы.

Реактивность VueJS - документация.
Использование реативности с массивами - документация.


Ответ 2

C мнением @Дмитрий Полянинб я согласен, однако это не ответ на вопрос. 
Твой код работает не так, как задумано по нескольким причинам:

1) Пересчет индекса компании (whichIndex) повешен на клик, а нужно на change. Если
бы ты повесил обработчик как положено, то у тебя даже так не работало, как работает
сейчас. Повезло)

2)  Событие company_index эмитится еще до того, как будет создан компонент AllCompanies. 

Таким образом, в связи с вышесказанным, получается, что компонент  AllCompanies не
слышит события company_index, т.к. оно уже прошло. Потом, когда идет клик, индекс пересчитывается,
генериться событие company_index - и все работает как ты и задумывал.

Чтобы реализовать функционал, так как ты задумал - данные для AllCompanies необходимо
передавать в props, через router