James Myers James Myers - 10 months ago 1219
Javascript Question

vue is not defined on the instance but referenced during render

I'm trying to build a simple app in vue and I'm getting an error. My onScroll function behaves as expected, but my sayHello function returns an error when I click my button component

Property or method "sayHello" is not defined on the instance but
referenced during render. Make sure to declare reactive data
properties in the data option. (found in component )

Vue.component('test-item', {
template: '<div><button v-on:click="sayHello()">Hello</button></div>'

var app = new Vue({
el: '#app',
data: {
header: {
brightness: 100
methods: {
sayHello: function() {
onScroll: function () {
this.header.brightness = (100 - this.$el.scrollTop / 8);

I feel like the answer is really obvious but I've tried searching and haven't come up with anything. Any help would be appreciated.


Answer Source

But for a few specific circumstances (mainly props) each component is completely isolated from each other. Separate data, variables, functions, etc. This includes their methods.

Thus, test-item has no sayHello method.