[Vue 警告]：找不到元素
[英][Vue warn]: Cannot find element
問題描述
我正在使用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
我究竟做錯了什么？
6 個解決方案
解決方案1
355 已采納 2015-04-07 05:45:28
我認為問題是您的腳本在目標 dom 元素加載到 dom 之前執行...一個原因可能是您已將腳本放在頁面的頭部或放在 div 元素之前的腳本標記中#main 。 因此，當腳本執行時，它將無法找到目標元素，從而導致錯誤。
一種解決方案是將您的腳本放在加載事件處理程序中，例如
window.onload = function () {
var main = new Vue({
el: '#main',
data: {
currentActivity: 'home'
}
});
}
另一種語法
window.addEventListener('load', function () {
//your script
})
解決方案2
81 2017-08-20 10:06:03
我通過向 'script' 元素添加屬性 'defer' 解決了這個問題。
解決方案3
58 2016-11-14 16:44:31
我犯了同樣的錯誤。 解決方案是將您的腳本代碼放在正文末尾之前，而不是放在 head 部分中。
解決方案4
28 2017-10-01 16:42:25
簡單的事情是將腳本放在文檔下方，就在結束</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'
}
});
解決方案5
1 2020-06-05 21:34:35
您可以通過兩種方式解決它。
- 確保將 CDN 放在 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>
您需要將在任何其他 JavaScript 文件或 html 文件中編寫的相同 javascript 代碼放在此處。
- 在 JavaScript 文件中使用window.onload函數。
解決方案6
1 2020-06-06 13:48:13
我認為有時愚蠢的錯誤會給我們帶來這個錯誤。
<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>
[Vue 警告]：未知的自定義元素：... - 您是否正確注冊了組件？
[英][Vue warn]:Unknown custom element: ... -did you register the component correctly?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.