[Vue warn]：找不到元素

我正在使用Vuejs。這是我的標記：[Vue warn]：找不到元素

<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

我在做什麼錯？

來源

2015-04-07 dopatraman

這樣做的頁腳或頁眉？ –

將腳本移至窗口準備處理程序 –

就緒處理程序是問題。似乎很愚蠢，vue不包括這... @ArunPJohny - 如果您提交一個答案與一個片段生病將它標記爲正確的。 – dopatraman

141

我認爲問題是你的腳本是在目標dom元素被加載到dom之前執行的......一個原因可能是你已經將你的腳本放置在頁面的頭部或放置在腳本標記中在div元素#main之前。所以當腳本執行時，它將無法找到目標元素，從而出現錯誤。

的一個解決辦法是把你的腳本在Load事件處理程序像

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

另一個語法

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

來源

2015-04-07 05:45:28

嘿謝謝，對不起，這裏評論爲什麼vue js需要加載它，在文檔中沒有說明，謝謝 –

另外值得注意的是，'addEventListener'方法在技術上是一種更可維護的方法，因爲它不是壓倒性的全局'window.onload'屬性。 – joshwhatk

在''部分包含Webpack捆綁包腳本是導致我錯誤的原因。等待窗口被加載正在工作。 –

我得到同樣的錯誤。解決方法是將腳本代碼放在body的結尾，而不是放在head的部分。

來源

2016-11-14 16:44:31

之前身體結束但不在頭部？那究竟是什麼意思？ – daslicious

–

把你的vue.js代碼放在之前，瀏覽器會先加載主體內容，然後加載vue.js代碼，它會起作用。 –

我已經通過將屬性'defer'添加到'script'元素來解決問題。

來源

2017-08-20 10:06:03

這是所有給出的最乾淨的解決方案，應該有更多upvotes！ –

有關延期的更多信息，請訪問：https://www.w3schools.com/Tags/att_script_defer.asp –

簡單的事情是把文件下面的腳本，只是你結束</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' 
    } 
});

來源

2017-10-01 16:42:25

[Vue warn]：找不到元素

回答

相關問題