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

Question

Я создал бэкэнд и сейчас пытаюсь создать внешний интерфейс, используя его. Я очень новичок в 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.log('Setting ShowLoginDialog isVisible=' + isVisible + '. isLoginDialogVisible=' + this.isLoginDialogVisible)
      if (isVisible) {
        this.isLoginDialogVisible = true
      } else {
        this.isLoginDialogVisible = false
      }
      console.log('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.js

0

Philippe 29 Май 2019 в 10:53

Answer 1

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

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

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

Примечание. Если вы настаиваете на использовании простого старого синтаксиса функции, используйте переменную closure для отслеживания указателя this:

mounted () {

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

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

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

2

Harshal Patil 29 Май 2019 в 09:31

Answer 2

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

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

2

Steven Kuipers 29 Май 2019 в 08:19

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

2 ответа

Похожие вопросы

Новые вопросы

vue.js