CODEWITHSUNDEEP
vue.js
bertday
bertday

Reputation: 10971

Vue.js: property or method is not defined on the instance, but it is

I have a Vue.js component that looks like this:

<!-- MyComponent.vue -->

<script>
  export default {
    render: () {
      return;
    },
    methods: {
      foo() {
        alert('hi');
      },
    },
  };
</script>

And then my HTML looks like this:

<my-component @click="foo" />

When I run this I get an error:

Property or method "foo" 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.

I can't seem to understand what I'm doing wrong here -- all the other SO questions about this error seem to be caused by scoping issues, but I'm just dealing with a simple component.

Upvotes: 0

Views: 705

Answers (1)

Bill Criswell
Bill Criswell

Reputation: 32941

foo would need to be defined in the component using my-component, not in my-component itself.

Also, you'd need to do @click.native, unless you're specifically $emiting an event called click in my-component.

If you were to use @click="foo" inside of this component on an html element it would work like you expect (a @click on a component needs .native).

Upvotes: 2

Related Questions