Reputation: 10971
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
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 $emit
ing 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