Question

我试图在vue中构建一个简单的应用程序并且我收到错误。我的onScroll函数按预期运行，但是当我单击我的按钮组件时，我的sayHello函数返回错误

财产或方法＆＃34; sayHello＆＃34;没有在实例上定义但是在渲染期间引用。确保声明反应数据数据选项中的属性。（在组件中找到）

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);
        }
    }
});

我觉得答案非常明显，但我已经尝试过搜索，并且没有想出任何东西。任何帮助将不胜感激。

感谢。

Answer 1

但是对于一些特定情况（主要是props），每个组件彼此完全隔离。单独的数据，变量，函数等。这包括他们的方法。

因此，test-item没有sayHello方法。

Answer 2

您可以在Vue实例后使用 .mount('#app') 而不是 el 属性来消除警告>

检查下面的代码段;

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');

请注意;以下可能没有必要，但在尝试解决同一问题的过程中也是如此：Laravel Elixir Vue 2项目。

vue未在实例上定义，但在呈现期间引用

2 个答案: