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 you have read our privacy policy.

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