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

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

属性或方法“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);
        }
    }
});

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

谢谢。

1143

2017-10-05 02:28

起源

sayHello 不是一种方法 test-item。这是一种方法 app。 - ceejayoz

谢谢@ceejayoz，做到了。我在这里读过： vuejs.org/guide/components.html 每个组件都包含在自己独立的范围内。那么，我的组件不会继承我提供给根Vue实例的方法吗？ - James Myers

疑难杂症。很有意思，再次感谢。我会把你的答案标记为正确，欢呼。 - James Myers

它需要一点时间习惯，但是你会喜欢它，因为你在Vue中构建大型应用程序。 - ceejayoz

答案:

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

从而， test-item 没有 sayHello 方法。

2017-10-05 02:36

您可以通过使用来消除警告 .mount('#app') 在Vue实例之后而不是 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 项目。

2017-10-09 13:19

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

答案:

热门问题