2015-04-07 11 views
63

नहीं मिला मैं Vuejs का उपयोग कर रहा हूं। यह मेरा मार्कअप है:[वू चेतावनी]: तत्व

<body> 
    <div id="main"> 
     <div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div> 
    </div> 
    </body> 

यह मेरा कोड है:

[Vue warn]: Cannot find element: #main 

क्या मैं गलत कर रहा हूँ:

var main = new Vue({ 
    el: '#main', 
    data: { 
     currentActivity: 'home' 
    } 
}) 
; 

जब मैं पृष्ठ लोड मैं इस चेतावनी मिल सकता है?

+1

पाद लेख में ऐसा करने से, या शीर्ष लेख? –

+2

अपनी स्क्रिप्ट को एक विंडो तैयार हैंडलर –

+1

पर तैयार हैंडलर समस्या थी। मूर्खतापूर्ण लगता है कि vue में यह शामिल नहीं है ... @ArunPJohny - यदि आप स्निपेट के साथ उत्तर सबमिट करते हैं तो बीमार इसे सही के रूप में चिह्नित करें। – dopatraman

उत्तर

141

मुझे लगता है कि समस्या यह है कि लक्ष्य डोम तत्व को डोम में लोड करने से पहले आपकी स्क्रिप्ट निष्पादित की जाती है ... एक कारण यह हो सकता है कि आपने अपनी स्क्रिप्ट को पृष्ठ के शीर्ष पर रखा है या एक स्क्रिप्ट टैग में रखा गया है div element #main से पहले। इसलिए जब स्क्रिप्ट निष्पादित की जाती है तो यह लक्ष्य तत्व को इस प्रकार त्रुटि नहीं मिल पाएगी।

एक समाधान एक और वाक्य रचना

window.addEventListener('load', function() { 
    //your script 
}) 
+2

हे धन्यवाद, यहां टिप्पणी के लिए खेद है कि क्यों vue js को लोड करने की आवश्यकता है, दस्तावेज़ में कोई कहानियां नहीं है, धन्यवाद –

+4

यह भी ध्यान दें, 'addEventListener' विधि "तकनीकी रूप से" एक अधिक रखरखाव दृष्टिकोण है क्योंकि यह ओवरराइड नहीं है वैश्विक 'window.onload' संपत्ति। – joshwhatk

+0

'' अनुभाग में वेबपैक बंडल स्क्रिप्ट को शामिल करने से मुझे त्रुटि हुई। खिड़की को लोड करने की प्रतीक्षा कर रहा है। –

27

मैं एक ही त्रुटि मिलती है जैसे

window.onload = function() { 
    var main = new Vue({ 
     el: '#main', 
     data: { 
      currentActivity: 'home' 
     } 
    }); 
} 

लोड ईवेंट हैंडलर में अपनी स्क्रिप्ट जगह है। समाधान आपके स्क्रिप्ट कोड को शरीर के अंत से पहले रखना है, न कि मुख्य भाग में।

+0

धन्यवाद लेकिन सिर में नहीं? इसका सबसे सही मतलब क्या है? – daslicious

+3

+1

से पहले अपने vue.js कोड डाल दिया, ब्राउज़र पुराने शरीर सामग्री लोड होगा, तो vue.js कोड को लोड है, यह काम करेंगे। –

21

मैंने 'स्क्रिप्ट' तत्व में विशेषता 'defer' जोड़कर समस्या हल कर दी है।

+2

यह सभी दिए गए का सबसे साफ समाधान है, अधिक अपवित्र होना चाहिए! –

+0

यहां स्थगित करने के बारे में अधिक जानकारी: https://www.w3schools.com/Tags/att_script_defer.asp –

1

सरल बात है, दस्तावेज़ नीचे स्क्रिप्ट डाल करने के लिए है बस अपने समापन </body> टैग से पहले:

<body> 
    <div id="main"> 
     <div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div> 
    </div> 
    <script src="app.js"></script> 
</body> 

app.js फ़ाइल:

var main = new Vue({ 
    el: '#main', 
    data: { 
     currentActivity: 'home' 
    } 
}); 
संबंधित मुद्दे