亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue報錯Failed to execute 'appendChild' on 'Node'解決

 更新時間:2022年11月16日 15:49:47   作者:muio  
這篇文章主要為大家介紹了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項目打包清除console.log的4種方法

    vue項目打包清除console.log的4種方法

    項目打包的時候想要刪除console.log,本文主要介紹了vue項目打包清除console.log的4種方法,具有一定的參考價值,感興趣的可以了解游戲
    2023-11-11
  • vue如何通過日期篩選數(shù)據(jù)

    vue如何通過日期篩選數(shù)據(jù)

    這篇文章主要介紹了vue如何通過日期篩選數(shù)據(jù),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-05-05
  • VUE-ElementUI?時間區(qū)間選擇器的使用

    VUE-ElementUI?時間區(qū)間選擇器的使用

    這篇文章主要介紹了VUE-ElementUI?時間區(qū)間選擇器的使用,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-05-05
  • vue項目打包之開發(fā)環(huán)境和部署環(huán)境的實現(xiàn)

    vue項目打包之開發(fā)環(huán)境和部署環(huán)境的實現(xiàn)

    這篇文章主要介紹了vue項目打包之開發(fā)環(huán)境和部署環(huán)境的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-04-04
  • 詳解vue頁面狀態(tài)持久化詳解

    詳解vue頁面狀態(tài)持久化詳解

    這篇文章主要為大家介紹了vue頁面狀態(tài)持久化,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2021-12-12
  • 解決vue自定義全局消息框組件問題

    解決vue自定義全局消息框組件問題

    這篇文章主要介紹了vue自定義全局消息框組件問題及解決方法,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-11-11
  • vue2實現(xiàn)provide inject傳遞響應式

    vue2實現(xiàn)provide inject傳遞響應式

    在看element-ui的源碼的時候,注意到源碼里面有很多地方使用provide和inject的屬性,本文主要介紹了vue2實現(xiàn)provide inject傳遞響應式,分享給大家,感興趣的可以了解一下
    2021-05-05
  • vue+iview如何實現(xiàn)拼音、首字母、漢字模糊搜索

    vue+iview如何實現(xiàn)拼音、首字母、漢字模糊搜索

    這篇文章主要介紹了vue+iview如何實現(xiàn)拼音、首字母、漢字模糊搜索,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • Vue echarts模擬后端數(shù)據(jù)流程詳解

    Vue 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)境

    這篇文章主要介紹了詳解如何從零開始搭建Express+Vue開發(fā)環(huán)境,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-07-07

最新評論