Всем здравствуйте.
Вопрос наверное довольно простой, но я не пойму в чём проблема ...
Вот код: (это файл
App.vue)
<template>
<div id="app">
<router-view/>
<VuePopup
v-if="this.showPopup"
@closePopup="closePopup()"
/>
</div>
</template>
<script>
import VuePopup from './components/VuePopup'
export default {
name: 'App',
date(){
return {
showPopup: true,
}
},
components: {
VuePopup
},
methods: {
closePopup(){
this.showPopup = false
}
},
created() {
this.$store.commit('runServer')
}
}
</script>
Так вот, из-за того что я решил использовать
Vue-Router, мой
App.vue может запускать несколько различных страниц, в которых должен присутствовать компонент
VuePopup.
Я подумал, зачем же каждый раз его импортировать в каждом компоненте, и решил запихнуть его в корень.
Всё нормально работает, но беда пришла откуда я не ждал ...
Никак не могу воспользоваться
data. В чём может быть проблема?
Консоль выдаёт ошибку:
Property or method "showPopup" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
