[Vue चेतावनी]: तत्व नहीं मिल सकता है

166

मैं Vuejs का उपयोग कर रहा हूँ । यह मेरा मार्कअप है:

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

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

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

जब मैं पृष्ठ को लोड करता हूं तो मुझे यह चेतावनी मिलती है:

[Vue warn]: Cannot find element: #main

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

javascript mvvm vue.js

— dopatraman
स्रोत

1

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

— क्रिस बेकर

6

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

— अरुण पी जॉनी

2

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

— डोपाट्रमण

317

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

एक उपाय यह है कि अपनी स्क्रिप्ट को लोड इवेंट हैंडलर में रखें

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

एक और वाक्य रचना

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

— अरुण पी जॉनी
स्रोत

4

हे धन्यवाद, टिप्पणी के लिए क्षमा करें यहाँ क्यों vue js को इसे लोड करने की आवश्यकता है, डॉक्टर में कोई बताने वाला नहीं है, धन्यवाद

— फ्रेडी सिदौरुक

9

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

— joshwhatk

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

— अमीन NAIRI

1

कंसोल में कोई चेतावनी नहीं है कि DOM तत्वों के संदर्भ में स्क्रिप्ट विवरणों को DOM लोड होने से पहले मूल्यांकन किया जा रहा है? इसे लागू करने के लिए एक कठिन चेतावनी कैसे हो सकती है?

— टॉम रसेल

70

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

— सु चुआन
स्रोत

क्या defer का उपयोग करने के साथ कोई दुष्प्रभाव है?

— मोहम्मद अली अकबरी

1

आप स्क्रिप्ट टैग की deferविशेषता यहां कैसे काम करती है , इसके बारे में अधिक पढ़ सकते हैं । DOM के पार्स होने के बाद तक JS कोड चलाने में देरी होगी, लेकिन इससे पहले कि विंडो onloadइवेंट को निकाल दिया जाए।

— JrBaconCheez

51

मुझे समान त्रुटि मिली। इसका समाधान शरीर के अंत से पहले अपने स्क्रिप्ट कोड को रखना है, न कि हेड सेक्शन में।

— ली झिंगा झाओ
स्रोत

शरीर के अंत से पहले लेकिन सिर में नहीं? इसका सबसे सही मतलब क्या है?

— दासतापूर्ण

6

— li bing zhao

3

</ body> से पहले अपना vue.js कोड डालें, ब्राउज़र पहले बॉडी कंटेंट को लोड करेंगे, फिर vue.js कोड को लोड करेंगे, यह काम करेगा।

— ली बिंग झाओ

1

लारवेल और उसके साथ लार्वा-मिक्स का उपयोग करते हुए इस मुद्दे पर दौड़ें। शरीर को हल करने के बाद js की लोडिंग को ले जाना।

— जॉन

24

सरल बात यह है कि दस्तावेज़ को अपने समापन </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'
    }
});

— तदास स्टास्युलियोनिस
स्रोत

0

आप इसे दो तरीकों से हल कर सकते हैं।

सुनिश्चित करें कि आपने सीडीएन को html पेज के अंत में रखा है और उसके बाद अपनी स्क्रिप्ट रखें। उदाहरण:

    <body>
      <div id="main">
        <div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div>
      </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    <script src="js/app.js"></script>

जहाँ आपको उसी जावास्क्रिप्ट कोड को डालने की आवश्यकता है जो आपने किसी अन्य जावास्क्रिप्ट फ़ाइल या html फ़ाइल में लिखा है।

अपने जावास्क्रिप्ट फ़ाइल में window.onload फ़ंक्शन का उपयोग करें ।

— निजत मुरसली
स्रोत

0

मुझे लगता है कि कभी-कभी बेवकूफ गलतियाँ हमें यह त्रुटि दे सकती हैं।

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

सेवा

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

— निशार शाह
स्रोत