CODEWITHSUNDEEP
vue.jsvuejs2
RichyST
RichyST

Reputation: 273

Getting property not defined when I believe I did so correctly

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.

Upvotes: 0

Views: 440

Answers (1)

Harshal Patil
Harshal Patil

Reputation: 20970

As a Single File Component in Vue.js, for styling with CSS/SCSS/LESS, you must use style tag. The script tag is used for JS/TS code.

Upvotes: 1

Related Questions