I'm currently working on a Vue app and encountering an issue. The onScroll function is working correctly, but when I click the button component to trigger the sayHello function, I receive an error message.
The error states: "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."
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 have tried to resolve this issue by searching for solutions, but haven't had any luck so far. Any assistance would be greatly appreciated.
Thank you.