3

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

2 ответа 2

3

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

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

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

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

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

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

1
  • Во Vuex пока не хочу влезать, хочется, все таки, просто с vue разобраться. А вот доступ через $root не знал. Спасибо,буду пробовать
    – Litrein
    9 янв 2019 в 13:55
2

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

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

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

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

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

2
  • Спасибо....я совсем забыл, что пропс можно передавать через роуты. Попробую оба варианта
    – Litrein
    9 янв 2019 в 14:16
  • Вариантом, который предложил @Дмитрий Полянин, все работает, но я хочу разобраться и с передачей props через роуты. Прочитал документацию, что-то не могу понять, если честно
    – Litrein
    10 янв 2019 в 12:26

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.