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 ponent

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 ponent )

Vueponent('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 e up with anything. Any help would be appreciated.

Thanks.

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 ponent

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 ponent )

Vue.ponent('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 e up with anything. Any help would be appreciated.

Thanks.

• javascript
• vue.js

• 2 sayHello isn't a method of test-item. It's a method of app. – ceejayoz Commented Oct 5, 2016 at 2:29
• Thanks @ceejayoz, that did it. I did read that here: vuejs/guide/ponents.html that each ponent is contained in its own isolated scope. So, my ponent doesn't inherit the methods that I give to the root Vue instance? – James Myers Commented Oct 5, 2016 at 2:35
• Gotcha. Very interesting, thanks again. I'll mark your answer as correct, cheers. – James Myers Commented Oct 5, 2016 at 2:37
• It takes a bit of getting used to, but you'll love it as you architect large apps in Vue. – ceejayoz Commented Oct 5, 2016 at 2:39

2 Answers 2

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

Thus, test-item has no sayHello method.

You can get rid of the warning by using .mount('#app') after the Vue instance rather than the el attribute.

Check the snippet below;

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

Please note; the following might not be necessary but did it along the way trying to solve the same issue: Laravel Elixir Vue 2 project.