Открыть модальное диалоговое окно при событии шины событий

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

App.vue группирует следующие компоненты: заголовок, основной раздел (маршрутизированный), нижний колонтитул и модальное диалоговое окно входа в систему. Проблема, которую я пытаюсь решить, заключается в отображении модального диалогового окна входа в систему при нажатии кнопки входа (которая находится в компоненте заголовка); в настоящее время ничего, кроме регистрируемых сообщений, не происходит.
Для этого я создал шину событий и запускаю событие:

export default {
  name: 'SppdTeamTunerHeader',
  methods: {
    emitShowLoginDialogEvent () {
      EventBus.$emit('ShowLoginDialog', true)
    }
  }
}

Выдача события работает, как я вижу в Vue DevTools для Chrome.

Вот полный код App.vue:

<template>
  <div id = "app">
    <SppdTeamTunerHeader/>
    <router-view></router-view>
    <SppdTeamTunerFooter/>

    <LoginDialogModal
      v-show = "isLoginDialogVisible"
    />
  </div>
</template>

<script>
import SppdTeamTunerHeader from '@/components/TheHeader'
import SppdTeamTunerFooter from '@/components/TheFooter'
import LoginDialogModal from '@/components/LoginDialogModal'
import { EventBus } from '@/common/EventBus'

export default {
  name: 'App',
  components: {
    SppdTeamTunerHeader,
    SppdTeamTunerFooter,
    LoginDialogModal
  },
  data: function () {
    return {
      isLoginDialogVisible: false
    }
  },
  mounted () {
    EventBus.$on('ShowLoginDialog', function (isVisible) {
      console.info('Setting ShowLoginDialog isVisible=' + isVisible + '. isLoginDialogVisible=' + this.isLoginDialogVisible)
      if (isVisible) {
        this.isLoginDialogVisible = true
      } else {
        this.isLoginDialogVisible = false
      }
      console.info('Finished setting isLoginDialogVisible=' + this.isLoginDialogVisible)
    })
  },
  destroyed () {
    EventBus.$off('ShowLoginDialog')
  }
}
</script>

При проверке консоли при нажатии кнопки входа печатается следующее:

Setting ShowLoginDialog isVisible=true. isLoginDialogVisible=undefined
Finished setting isLoginDialogVisible=true

Значение, зарегистрированное для isLoginDialogVisible, не может быть получено из переменной, определенной в функции данных, поскольку она печатает неопределенное значение, тогда как оно было определено как ложное (я думаю, это моя главная проблема).

Я прочитал довольно много статей на эту тему, например:

Пример модального диалога, на основе которого я реализовал реализацию, взят отсюда: https://alligator.io/vuejs/vue-modal-component/

vue.js

29.05.2019 09:53

Стоит ли изучать PHP в 2023-2024 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

1 148

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Я считаю, что ваш прослушиватель событий EventBus должен быть доступен для App. Прямо сейчас EventBus и App — это два отдельных экземпляра. Вы можете смонтировать обработчик событий внутри приложения следующим образом:

mounted () {
   EventBus.$on('ShowLoginDialog', function (isVisible) {
      ...
    });

Не забудьте отключить его, например. уничтожено () {}

— 29.05.2019 10:20

Я попробовал это и обновил код App.vue в своем исходном вопросе. Первая зарегистрированная строка по-прежнему говорит isLoginDialogVisible=undefined.

— 29.05.2019 10:27

29.05.2019 10:19

Ответ принят как подходящий

Это происходит потому, что вы не используете функцию Стрелка. Вместо простой функции используйте стрелочную функцию следующим образом:

mounted () {
    // Note the use of arrow function.
    EventBus.$on('ShowLoginDialog', (isVisible) => {
      // .. All your code
    })
}

Если вы используете простую функцию function () {}, то этот указатель недоступен во внутренней функции. Функция стрелки будет лексически связывать this указатель с this контекстом функции установлен(). Так что используйте функцию стрелки, т.е. () => {};

Note: If you insist on using plain old function syntax then use closure variable to keep track of this pointer:

mounted () {

    // Assign this pointer to some closure variable
    const vm = this;

    EventBus.$on('ShowLoginDialog', function (isVisible) {
      console.info('Setting ShowLoginDialog isVisible=' + isVisible + '. isLoginDialogVisible=' + vm.isLoginDialogVisible)
      if (isVisible) {
        vm.isLoginDialogVisible = true
      } else {
        vm.isLoginDialogVisible = false
      }
      console.info('Finished setting isLoginDialogVisible=' + vm.isLoginDialogVisible)
    })
}

Это не имеет ничего общего с Vue.js. Это типичное поведение JavaScript.

29.05.2019 11:31