インスタンスではvueが定義されていませんが、レンダリング中に参照されます

Question

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

答えは本当に明白ですが、私が探して試してみた、何が出ていないような気がします。どんな助けもありがとう。

ありがとうございました。

Answer 1

しかし、いくつかの特定の状況（主にprops）では、各成分はお互いに完全に分離されています。データ、変数、関数などを分離する。これにはメソッドも含まれる。

したがって、test-itemにはsayHelloメソッドがありません。

Answer 2

あなたはVueのインスタンスではなく、el属性後.mount('#app')を使用して警告を取り除くことができます。

以下のスニペットを確認してください。

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プロジェクト。