I'm getting the following error:
Property or method "showNotification" 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. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
---> <MsgcNotification> at src/layout/Header/msgc/msgc.vue
Inside a very simple component. I've seen this error a hundred times and I know it's normally because I am trying to use a variable in the template that wasn't defined in my JS code.
I tried adding it as a prop, as part of the data and even as a computed property but for some reason I cannot get the error to disappear.
My component looks like this:
<template>
<span>
<span v-if="showNotification" class="msgc-notification" :style="{ top: topPos, left: leftPos, right: rightPos }">
{{ amountToDisplay }}
</span>
</span>
</template>
<script src="./msgc.js" />
<script src="./msgc.scss" scoped lang="scss" />
Its javascript looks like:
import * as SessionValidator from 'session-validator'
export default {
props: {
isLoggedIn: {
type: Boolean,
default: SessionValidator.isValidSession()
},
unreadMessages: {
type: Number,
default: 0
},
amountToDisplay: {
type: String,
default: '0'
},
topPos: {
type: String,
default: 'auto'
},
leftPos: {
type: String,
default: 'auto'
},
rightPos: {
type: String,
default: 'auto'
}
},
data() {
return {
showNotification: false
}
},
watch: {
unreadMessages: {
handler: function handler(value) {
this.showNotification = (this.isLoggedIn && value > 0)
if (this.showNotification) this.amountToDisplay = value > 99 ? '+99' : value.toString()
}
}
}
}
I can't believe I'm stuck in such a simple error but I just can't see my mistake. I need some fresh eyes to take a look.
EDIT: I'm an idiot, I was loading my styles with a script tag instead of a style tag.
