Property or Method is Not Defined

Chances are if you’ve been developing with Vue for any amount of time, you’ve gotten this error:

Most of the time this error is because you misspelled a variable name somewhere.

But there are other causes as well.

I’ve gotten this one so many times because it’s a fairly easy mistake to make. Luckily, fixing it is pretty easy too, and I’m no longer stumped by it like I was when I first encountered it.

What does the warning mean?

The full message is this:

[Vue warn]: Property or method “prop” 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://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

This gist of the error is this.

Vue is trying to render your component, and your component wants to use the property prop, but Vue can’t find prop anywhere.

You don’t need to worry about the reactive properties part of the error for now. As long as you define things in data you’ll be okay (but it is good to understand how reactivity works).

So, let’s take a look at the 2 main problems that can cause this warning!

1. You misspelled a variable name

This is the one that always gets me.

I was typing too fast or wasn’t paying enough attention. I misspelled a variable name, and now Vue is complaining because it doesn’t know what I’m trying to do.

<template>   
   <div>{{ messag }}</div> 
</template>

export default {   
  data() {     
    return {       
     message: "Hello, world!"     
   };   
  } 
 };

2. The value is defined on a different component

This is another common mistake that is easy to make.

Components are scoped, meaning that something defined in one component isn’t available in another. You have to use props and events to move things between components.

But just like making a typo, it’s pretty easy to forget that a method or property is on one component, when it’s actually on a different one.

How does this happen?

Well, sometimes you’ll want to define multiple components in one file. It might look something like this:

<!-- Template for the Page component -->
<template>
  <ul>
    <link-item url="google.com" text="Google" />
    <link-item url="yahoo.com" text="Yahoo" />
    <link-item url="facebook.com" text="Facebook" />
  </ul>
</template>

// Clean up some code by using another component
const LinkItem = {
  props: ['url', 'text'],
  template: `
    <li>
      <a
        :href="url"
        target="_blank"
      >
        {{ text }}
      </a>
    </li>
  `
};

// Define the Page component
export default {
  name: 'Page',
  components: { LinkItem },
};

Instead of rewriting the <li> tag each time, we just encapsulated it inside of the LinkItem component.

I hope This Post is helpful for you..