James Myers James Myers - 1 month ago 493
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() {
console.log('Hello');
},
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.

Thanks.

Answer

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.

Comments