vue报错Failed to execute 'appendChild' on 'Node'解决

目录
  • 一、问题描述
  • 二、解决过程

一、问题描述

某天在开发需求时发现，业务页面上报告了一个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包里报了一个错误，但从报错提供的信息看不出来那行代码引发的报错。

二、解决过程

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标签，重试后发现没有效果，依然报错。

也有说法说是由于标签的关闭写法导致的Hydration errors。

于是我搜索了下项目代码，发现确实有几处标签是使用类似 <span class="split" /> 写法进行关闭的。抱着尝试的心理，我把这些写法都改成了<span class="split"></span>。

然而重试后依然没有解决这个报错。

2、断点调试：

既然网上的方法没有效果，那只能打断点看看是否能找到报错的具体位置。

从错误报告点击进详情，可以看到是vue.min.js文件的appendChild抛出的错误。

在这里打一个断点，并运行：

第一次经过此处：e是一个div，t是一个#comment的node节点，此时还没有抛出错误。

第二次经过此处：e是一个div，t是一个text元素，此时还没有抛出错误。

第三次经过此处：e是#comment的node节点，t是一个按钮的div元素，此处抛出了对应的错误。

也就是在第三次运行appendChild时，由于e此时是一个node节点，不支持appendChild方法，于是vue抛出了Uncaught DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.错误。

在项目里搜索comment，发现并没有找到相应的代码。于是从第三次appendChild的t参数入手。

可以看出来这是一个按钮元素，并且按钮文字内容是“我知道了”。在项目里搜索“我知道了”，可以找到两处符合条件的元素。根据此时的页面位置可以排除captcha组件，所以锁定了verifyResult组件里的“我知道了”按钮。

这处按钮的html代码如下：

<q-button
  v-if="resultInfo.showBtn"
  type="primary"
  @click="resultInfo.callback"
>
  {{ resultInfo.btnText }}
</q-button>

先把这部分内容直接注释掉看看。 发现这个报错确实不见了。可以确认，这个按钮就是报错的源头。

3、定位：

那这个按钮到底有啥问题呢？看起来就是一个平平无奇的确认按钮呀。

从刚刚打断点的时候可以看到，此时按钮的text正常取到了"我知道了"文案，且报错信息是在进行appendChild，也就是添加元素的动作时。而这个按钮里用到了v-if，合理怀疑是这个v-if引起的。于是尝试把v-if去掉或改成一个常量，发现页面也不会报错。

所以可以确定，这里的报错是由于v-if的参数引起的。

这里v-if的参数是：resultInfo.showBtn

这里resultInfo是一个计算参数：

showBtn是通过另一个计算参数：isMobile来控制的。

看来问题就在isMobile上。

通过打印isMobile发现，在node时由于没有window，所以isMobile=false，而页面渲染时isMobile=true。

所以这里isMobile有一个从false -> true的变化。

所以这里按钮元素经历了从无到有的过程，在appendChild的时候node节点就抛出了错误。

4、解决

这里解决方案的主要就是去掉这个从无到有的过程，或者把这个变化后移。

  • 去掉这个从无到有的过程：把v-if改成v-show。
  • 把这个变化后移：isMobile不使用计算参数，在默认初始化为false，在created时再进行赋值。
created() {
    this.isMobile = browser.isMobile();
}

两种方法都可以解决，我这里使用了第一种解决方案，报错不再出现，且页面按钮可以正常显示~

以上就是vue报错Failed to execute 'appendChild' on 'Node'解决的详细内容，更多关于vue 报错解决的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • vue使用百度地图报错BMap is not defined问题及解决

    目录 使用百度地图报错BMap is not defined vue导入百度地图BMap 使用百度地图报错BMap is not defined 1.在index.html添加 密钥申请:http://lbsyun.baidu.com/apiconsole/key <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script

  • Luckysheet 在vue中离线使用及引入报错的解决方案(推荐)

    目录 1.git下载源码运行打包dist 2.将dist文件引入项目 3.应用 4.常见报错 1.git下载源码运行打包dist git 源码地址:https://github.com/mengshukeji/Luckysheet 下载好源码之后执行 npm install npm install gulp -g //跑去源码看看正常与否 npm run dev //如果正常执行打包 npm run build 打包结束后在目录下找到 dist 文件 2.将dist文件引入项目 将dist离线包

  • 关于Vue ui 的没反应、报错问题解决总结

    目录 Vue ui 的没反应.报错问题 一.vue ui 启动出现的报错问题 Vue ui无法启动项目管理器 原因 遇到版本低的解决方案 没有ui功能的解决方法 Vue ui 的没反应.报错问题 一.vue ui 启动出现的报错问题 vue ui 输入后 回车没反应? cmd 输入: vue ui // 没反应 原因一:安装的 nodejs 和 node_modules(有npm) 没有在同一个目录下: 安装时会默认安装在"C:\Program Files…"里的. 解决: (1)卸载

  • Vue中引入swiper报错的问题及解决

    目录 首先上报错信息 下载swiper6.x版本 首先上报错信息 -----------更新------------------------------------------- 都是由于版本问题惹得锅!!! 刚开始我的swiper安装的是最新版,也就是7.0的版本,但是报各种错,我就降成了6.0的版本. 页面是可以正常显示出来了,但是我的swiper的options配置完全不起作用,不能自动播放,也不显示分页器注意. 查询得知VUE2对于高版本的swiper可能兼容性不好,所以我卸载了6.0的

  • vue 图片路径 “@/assets“ 报错问题及解决

    目录 问题 解决 为什么 静态导入文件路径 静态导入绝对路径 动态导入相对路径 动态导入绝对路径 问题 在更改背景图片时写的图片相对路径是这样的: 由于@在webpack 被resolve.alias配置下等价于/src,然后直接运行了程序结果报错了 报错状态: 大概意思就是说,无法解析 asset 包 解决 经过查询资料找到了解决办法: 由于相对根目录的路径 “/assets/background.png” webpack不解析 此时需要在@前加上“~” 因为带“~”的路径 “~@/asset

  • maven package 打包报错 Failed to execute goal的解决

    总结一下maven 打包,项目工程开发工具idea14,使用 JDK 1.8 版本 1.打包前需要先将idea关掉,不然会导致mvn clean的时候,部分文件删除不掉,mvn package的时候,也会丢失文件. 2.mvn package打包报错:[ERROR] Failed to execute goal org.apache.maven.plugins:maven-clean-plugin:2.6.1:clean (default-clean) on project 解决办法: 1. p

  • Vue.js报错Failed to resolve filter问题的解决方法

    Vue.js报错Failed to resolve filter问题的解决方法

    之前使用vue.js写分页功能时,写了一个过滤器,发现一个比较奇怪的错误. console控制台调试的时候,提示错误消息: Failed to resolve filter: HomePage console错误信息.jpg 我原来的写法: 原来的错误写法.jpg 错误原因: 经过自己的摸索,后来发现竟然是代码顺序错误问题. 由于先执行的pageList,后执行的Vue的过滤方法,最终调整过的写法: 修改后的正确写法.jpg 作者:=金刚= 文章地址:http://www.cnblogs.com

  • Vue报错error:0308010C:digital envelope routines::unsupported的解决方法

    目录 发现错误 方法1.打开终端(按健win+R弹出窗口,键盘输入cmd,然后敲回车)并按照说明粘贴这些:(不一定行,本人失败了) 方法2.尝试卸载Node.js 17+版本并重新安装Node.js 16+版本,然后再重新启动 总结 发现错误 出现这个错误是因为 node.js V17版本中最近发布的OpenSSL3.0, 而OpenSSL3.0对允许算法和密钥大小增加了严格的限制,可能会对生态系统造成一些影响. 方法1.打开终端(按健win+R弹出窗口,键盘输入cmd,然后敲回车)并按照说明粘

  • 解决vue安装less报错Failed to compile with 1 errors的问题

    1.创建vue项目后安装less,执行 npm install less less-loader --save-dev 下载版本为:less-loader@6.1.0 , less@3.11.3,重启服务报错,报错信息如下: 2.报错原因 less 本版太高需要降低版本,执行代码 先移除之前版本: npm uninstall less-loader 下载指定版本: npm install less-loader@5.0.0 -D 3.重启代码就可以了,若还是报错可移除文件node_modules

  • Vue报错Syntax Error:TypeError: this.getOptions is not a function的解决方法

    Vue报错Syntax Error:TypeError: this.getOptions is not a function的解决方法

    目录 一.简单介绍 二.报错现象 三.问题分析 四.问题处理 1.查看 node 版本和 node-sass 版本依赖关系 2.查看 当前 node 版本和 node-sass 版本是否符合依赖关系 3.当前 node 版本和 node-sass 版本符合依赖关系,可能就是 sass-loader 版本过高,卸载 sass-loader 4.尝试安装低版本的  sass-loader 5.运行 vue 工程,顺利通过了 总结 一.简单介绍 Vue 开发的一些知识整理,方便后期遇到类似的问题,能够

  • vue3+vite项目中按需引入vant报错:Failed to resolve import的解决方案

    目录 问题描述 原因分析 解决方案 总结 问题描述 近日尝试使用vite+vue3+vant开发项目过程中,参考vant官网开发指南->快速上手->引入组件 按照上述配置好后,运行vite环境报错:Failed to resolve import 原因分析 根据报错信息,发现是vant的样式引入路径不对. 程序解析为:项目路径/node_modules/vant/lib/vant/es/组件/style 实际应该是:项目路径/node_modules/vant/lib/ vant/es/组件/

  • IdeaGo启动报错Failed to create JVM的问题解析

    [内容]: 问题情况 出现之前做了什么 出错之前通过这个功能增加了个错误的vm参数:-agent:xxx.jar 怎么办? 百度了一圈,都是让删掉:C盘\用户\用户名\.IntelliJIdea2019.3\config\idea64.exe.vmoptions 然而,我这并没有这个文件.百思不得其解,重装等各种方式都试过还是不能用. 思考之: 1.这明显是一个用户下的配置文件,因此肯定是配置文件使用到了用户级别的,改idea下的配置文件肯定是没用的. 2.明显是因为我修改了VM 参数导致的,网

  • Vue 报错Error: No PostCSS Config found问题及解决

    Vue 报错Error: No PostCSS Config found问题及解决

    目录 Vue 报错Error: No PostCSS Config found 解决办法 Vue使用中报错处理ERROR Vue常见错误解析 Vue 报错Error: No PostCSS Config found 从git上 clone 下来的代码: npm install 安装依赖以后,启动服务,出现Error: No PostCSS Config found报错: npm run dev 解决办法 在项目根目录下创建postcss.config.js,配置内容如下:即可修复报错问题. mo

  • 解决JS请求路径控制台报错 Failed to launch'xxx' because the scheme does not have a registered handler的问题

    目录 控制台报错: Failed to launch ‘xxx’ because the scheme does not have a registered handler. 扩展:js获取请求路径中参数值 获取请求路径中的参数值 控制台报错: Failed to launch ‘xxx’ because the scheme does not have a registered handler. 这种错误是因为请求没有协议,应该把协议头加上 错误的例子 window.location.href

  • Maven install 报错"程序包不存在"问题的解决方法

    概述 在mvn clean install时,控制台各种报错,大概有: java:[8,52] 程序包com.xxx不存在 java:[98,27] 找不到符号 符号: 类 XXX 位置: 类XXX [ERROR] COMPILATION ERROR : Caused by: org.apache.maven.plugin.compiler.CompilationFailureException: Compilation failure  at org.apache.maven.plugin.c

随机推荐