Я создал бэкэнд и сейчас пытаюсь создать внешний интерфейс, используя его. Я очень новичок в 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://codingexplained.com/coding/front-end/vue-js/why-components-data-properties-must-be-functions
- https://vuejs.org/v2/guide/instance.html#Data-and-Methods
Пример модального диалога, на котором я основал реализацию, можно найти здесь: https://alligator.io / vuejs / Вью - модальный - компонент /
2 ответа
Это происходит потому, что вы не используете функцию стрелка . Вместо простой функции используйте функцию стрелки следующим образом:
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.
Я считаю, что ваш слушатель событий EventBus должен быть доступен для приложения. В настоящий момент EventBus и App являются двумя отдельными экземплярами. Вы можете смонтировать обработчик событий внутри приложения следующим образом:
mounted () {
EventBus.$on('ShowLoginDialog', function (isVisible) {
...
});
Похожие вопросы
Новые вопросы
vue.js
Vue.js - это прогрессивная среда Javascript с открытым исходным кодом для создания пользовательских интерфейсов, которые стремятся к постепенному внедрению. Vue.js в основном используется для фронт-энда и требует промежуточного уровня HTML и CSS. Вопросы, связанные с версией Vue.js, должны быть помечены [vuejs2] или [vuejs3].