Javascript vue 未在实例上定义，但在渲染期间被引用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39864526/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
vue is not defined on the instance but referenced during render
提问by James Myers
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
我正在尝试在 vue 中构建一个简单的应用程序，但出现错误。我的 onScroll 函数按预期运行，但是当我单击按钮组件时，我的 sayHello 函数返回错误
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 )
属性或方法“sayHello”未在实例上定义，而是在渲染期间引用。确保在数据选项中声明反应数据属性。（在组件中找到）
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.
谢谢。
采纳答案by ceejayoz
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.
但是对于一些特定情况（主要是props），每个组件彼此完全隔离。分离数据、变量、函数等。这包括它们的方法。
Thus, test-itemhas no sayHellomethod.
所以，test-item没有sayHello办法。
回答by Lee Brown
You can get rid of the warning by using .mount('#app')after the Vue instance rather than the elattribute.
您可以通过.mount('#app')在 Vue 实例之后使用而不是属性来消除警告。el
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 2project.
请注意; 以下可能不是必需的，但在尝试解决同一问题的过程中这样做了：Laravel Elixir Vue 2项目。
