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

आप elविशेषता से Vue उदाहरण के बाद .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 प्रोजेक्ट।