vue報錯Failed to execute 'appendChild' on 'Node'解決
一、問題描述
某天在開發(fā)需求時發(fā)現(xiàn),業(yè)務頁面上報告了一個Script error。
由于vconsole看不到詳細報錯信息,于是在chrome上打開,具體報錯信息如下:
Uncaught DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method. at Object.appendChild
看起來是vue2.6.12包里報了一個錯誤,但從報錯提供的信息看不出來那行代碼引發(fā)的報錯。
二、解決過程
1、google:
解決問題的第一步往往是先看看“別人咋解決的”:把錯誤信息ctrl+c ctrl+v到瀏覽器里google一下先。
stackoverflow里看到的第一個解決方案是通過添加client-only
標簽:
<template> <div id="container"> <client-only> <Components> </client-only> <div> </template>
在項目里也照著這個方法在App.vue里添加client-only
標簽,重試后發(fā)現(xiàn)沒有效果,依然報錯。
也有說法說是由于標簽的關閉寫法導致的Hydration errors
。
于是我搜索了下項目代碼,發(fā)現(xiàn)確實有幾處標簽是使用類似 <span class="split" />
寫法進行關閉的。抱著嘗試的心理,我把這些寫法都改成了<span class="split"></span>
。
然而重試后依然沒有解決這個報錯。
2、斷點調試:
既然網(wǎng)上的方法沒有效果,那只能打斷點看看是否能找到報錯的具體位置。
從錯誤報告點擊進詳情,可以看到是vue.min.js
文件的appendChild拋出的錯誤。
在這里打一個斷點,并運行:
第一次經(jīng)過此處:e是一個div,t是一個#comment的node節(jié)點,此時還沒有拋出錯誤。
第二次經(jīng)過此處:e是一個div,t是一個text元素,此時還沒有拋出錯誤。
第三次經(jīng)過此處:e是#comment的node節(jié)點,t是一個按鈕的div元素,此處拋出了對應的錯誤。
也就是在第三次運行appendChild時,由于e此時是一個node節(jié)點,不支持appendChild方法,于是vue拋出了Uncaught DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
錯誤。
在項目里搜索comment,發(fā)現(xiàn)并沒有找到相應的代碼。于是從第三次appendChild的t參數(shù)入手。
可以看出來這是一個按鈕元素,并且按鈕文字內容是“我知道了”。在項目里搜索“我知道了”,可以找到兩處符合條件的元素。根據(jù)此時的頁面位置可以排除captcha組件,所以鎖定了verifyResult組件里的“我知道了”按鈕。
這處按鈕的html代碼如下:
<q-button v-if="resultInfo.showBtn" type="primary" @click="resultInfo.callback" > {{ resultInfo.btnText }} </q-button>
先把這部分內容直接注釋掉看看。 發(fā)現(xiàn)這個報錯確實不見了。可以確認,這個按鈕就是報錯的源頭。
3、定位:
那這個按鈕到底有啥問題呢?看起來就是一個平平無奇的確認按鈕呀。
從剛剛打斷點的時候可以看到,此時按鈕的text正常取到了"我知道了"文案,且報錯信息是在進行appendChild
,也就是添加元素的動作時。而這個按鈕里用到了v-if
,合理懷疑是這個v-if
引起的。于是嘗試把v-if去掉或改成一個常量,發(fā)現(xiàn)頁面也不會報錯。
所以可以確定,這里的報錯是由于v-if的參數(shù)引起的。
這里v-if的參數(shù)是:resultInfo.showBtn
這里resultInfo是一個計算參數(shù):
showBtn是通過另一個計算參數(shù):isMobile來控制的。
看來問題就在isMobile
上。
通過打印isMobile發(fā)現(xiàn),在node時由于沒有window,所以isMobile=false,而頁面渲染時isMobile=true。
所以這里isMobile有一個從false -> true的變化。
所以這里按鈕元素經(jīng)歷了從無到有的過程,在appendChild的時候node節(jié)點就拋出了錯誤。
4、解決
這里解決方案的主要就是去掉這個從無到有的過程,或者把這個變化后移。
- 去掉這個從無到有的過程:把
v-if
改成v-show
。 - 把這個變化后移:isMobile不使用計算參數(shù),在默認初始化為false,在created時再進行賦值。
created() { this.isMobile = browser.isMobile(); }
兩種方法都可以解決,我這里使用了第一種解決方案,報錯不再出現(xiàn),且頁面按鈕可以正常顯示~
以上就是vue報錯Failed to execute 'appendChild' on 'Node'解決的詳細內容,更多關于vue 報錯解決的資料請關注腳本之家其它相關文章!
相關文章
vue項目打包之開發(fā)環(huán)境和部署環(huán)境的實現(xiàn)
這篇文章主要介紹了vue項目打包之開發(fā)環(huán)境和部署環(huán)境的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-04-04vue2實現(xiàn)provide inject傳遞響應式
在看element-ui的源碼的時候,注意到源碼里面有很多地方使用provide和inject的屬性,本文主要介紹了vue2實現(xiàn)provide inject傳遞響應式,分享給大家,感興趣的可以了解一下2021-05-05vue+iview如何實現(xiàn)拼音、首字母、漢字模糊搜索
這篇文章主要介紹了vue+iview如何實現(xiàn)拼音、首字母、漢字模糊搜索,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04Vue echarts模擬后端數(shù)據(jù)流程詳解
在平常的項目中,echarts圖表我們也是使用的非常多的,通常我們從后端拿到數(shù)據(jù),需要在圖表上動態(tài)的進行呈現(xiàn),接下來我們就模擬從后端獲取數(shù)據(jù)然后進行呈現(xiàn)的方法2022-09-09詳解如何從零開始搭建Express+Vue開發(fā)環(huán)境
這篇文章主要介紹了詳解如何從零開始搭建Express+Vue開發(fā)環(huán)境,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-07-07