vue v-for渲染数据出现DOMException: Failed to execute 'removeChild' on 'Node': The node .....

最新推荐文章于 2024-05-12 22:40:26 发布
最新推荐文章于 2024-05-12 22:40:26 发布
阅读量1.2k 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/yifangts/p/7154306.html
版权

在项目中,使用了vue的v-for渲染数组数据,在一次改变数组的时候出现异常报错,而实际的数组是已经变化过的了,页面卡死

网上找了一下原因,说是vue的DOM渲染的时候,删除之后DOM里面的还没有反应过来,在v-for的上一级添加一个v-if的状态,删除的时候隐藏,数组更新完成时候显示

 

 

 真的就不会了....具体不再深究了

 

转载于:https://www.cnblogs.com/yifangts/p/7154306.html

weixin_30458043
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
10-16
主要介绍了vue.js基于v-for实现批量渲染 Json数组对象列表数据,结合实例形式分析了vue.js使用v-for遍历json格式数据渲染列表相关操作技巧,需要的朋友可以参考下
Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'报错问题
sisixiyu6688的博客
09-17 1万+
原因： node_modules > iview > src > components > spin.js remove (cb) { spin.visible = false; setTimeout(function() { spin.$parent.$destroy(); //这个地方少了一个这个节点判断，导致removeChild 里面的节...
Failed to execute ‘removeChild‘ on ‘Node‘: The node to be removed is not a child of this node.
BUG_CONQUEROR_LI的博客
10-10 1万+
React项目过程中因为渲染问题的可能原因分析以及解决方案
DOMException: Failed to construct ‘Worker‘， 乾坤框架中子应用vue-pdf预览在主应用报错处理办法，其他文件预览同理
weixin_49284272的博客
03-26 381
在初次打开阅读报告弹窗时，出现了加载顺序问题，本来是把数据传递写在接口内的，可是发现等接口跑完，发送，主应用未能监听到消息，退而求其次，选择用路由的方式把渲染的pdf对象的id给主应用（iframeId ），那我们要怎么在子应用中找到这个主应用的文件呢，路由呗，在主应用的路由文件中注册它，那么主应用的准备就做好了。通过DpfSlot来条件判断，当前是在子应用本地（preview ），还是在主应用打开的，，来区分，true是主应用，在子应用则是undefined。主应用文件里就变成了这样。
使用iview实现某些组件时报错Failed to execute removeChild on Node
欢迎来到iceseasyh的博客
06-29 763
完整错误 出现场景 在用iview实现tree组件实现编辑的功能时出现 添加子节点和修改子节点时报错 分析原因 报错位置，iview.js的这个函数 说明this.$el判断有问题 错误意思是删除一个node，但是它不是body的子node 解决办法 用document.body.contains改写函数，先来判断是不是body的子node，然后删除 ...
VUEJS项目实践七之Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of
热门推荐
Yolanda_NuoNuo的专栏
05-02 3万+
问题描述： Failed to execute ‘removeChild’ on ‘Node’: The node to be removed is not a child of this node. 问题背景： 在我之前的博文 VUEJS项目实践五之Dialog弹出框MessageBox（超好看的bootstrap样式） 中有介绍一个样式结合了Bootstrap样式的MesageBox 然后在之...
VuePress在生产环境跳转子页报错 Failed to execute ‘appendChild‘ on ‘Node‘
孙君的空间站
07-25 429
VuePress在生产环境跳转子页报错 Failed to execute 'appendChild' on 'Node'
vue v-for渲染数据出现DOMException: Failed to execute ‘removeChild‘ on ‘Node‘: The node .....
AIGC大前端小王子
03-24 2833
本文主要介绍 vue v-for渲染数据出现DOMException: Failed to execute ‘removeChild’ on ‘Node’: The node to be removed is not a child of this node.处理方案 data(){ // 是否操作中 使用了vue的v-for渲染数组数据,在一次改变数组的时候出现异常报错,而实际的数组是已经变化过的了,页面卡死 opting: true, }, methods:{ // 切换二级菜单栏 ch.
vue 报错：DOMException: Failed to execute ‘removeChild‘ on ‘Node‘
且听风吟的博客
09-03 7845
在使用vue的时候，我们因为改变了页面的DOM结构，可能会遇见这样的告警信息，并且页面会被卡主，需要刷新才可以解决；但是，在实际项目中，这样的情况肯定是不允许出现的。错误告警如下： "NotFoundError: Failed to execute ‘insertBefore’ on ‘Node’。 如下图： 关于 v-if 和 v-show 两个指令的区别，传送门： v-if 和 v-show 的区别 ...
浅谈vue.js中v-for循环渲染
12-29
这两天学习了Vue.js 感觉v-for循环渲染这个地方知识点挺多的，而且很重要，所以，今天添加一点小笔记。 一、简介 vue.js 的循环渲染是依赖于 v-for 指令，它能够根据 vue 的实例里面的信息，循环遍历所需数据，然后...
node-v14.16.0-x64
09-22
node-v14.16.0-x64
DOMException: Failed to execute ‘appendChild‘ on ‘Node‘: This node type does not support this method
weixin_52016899的博客
08-30 1856
DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
TypeError: Failed to execute ‘removeChild‘ on ‘Node‘: parameter 1 is not of type ‘Node‘.
qq_44755885的博客
10-18 3963
JS动态删除，for中慎用带有i的元素。
Failed to execute ‘removeChild‘ on ‘Node‘: parameter 1 is not of type ‘Node‘.
qq 117791303
01-26 4593
setting.html:1422 Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'. setting.html:4858 Uncaught TypeError: Cannot read property 'value' of null. Util.byId(); getElementById(); ...
TypeScript中的函数类型注解：精确定义行为与意图
逐星的博客
05-11 317
在TypeScript中，函数不仅是一段执行特定任务的代码块，它们还可以拥有自己的类型。函数类型注解允许开发者定义函数的参数类型和返回值类型，从而提高代码的可读性和可维护性。函数类型注解是TypeScript中定义函数时的重要特性，它有助于确保函数参数和返回值符合预期，从而提高代码的准确性和安全性。
React中JSX语法入门
woliuhuaqiangla的博客
05-12 555
通过使用大括号{}，可以在JSX中使用任何有效的JavaScript表达式，包括变量、函数调用、算术运算和条件语句等。JSX将HTML标签和JavaScript代码结合在一起，可以在其中使用JavaScript表达式，并且可以通过使用大括号{}来嵌入JavaScript代码。通过使用JSX，我们可以在JavaScript代码中嵌入HTML标记，从而更容易地构建可复用的UI组件。在React中的JSX中，也可以使用任何有效的JavaScript表达式，包括变量、函数调用、算术运算、条件语句等。
前端Vue架构
最新发布
weixin_45678402的博客
05-12 130
defineProperty：监听范围比较窄，只能通过属性描述符去监听已有属性的读取和赋值；兼容性较差，只能兼容支持ES6 的浏览器（要求监听数据是对象）这样写的话，依赖收集只能收集到属性c；如果访问的属性值还是一个对象，对属性值再次进行代理；创建视图的函数（render）和数据之间的关联；当数据发生变化的时候，希望render重新执行；下面的用法，只能收集到c，收集不到c1。依赖收集：a color: #f00。依赖收集：a color: #f00。如何知晓数据对应的函数；监听数据的读取和修改；
使用 js 类封装项目中音频播放功能的工具方法utils
qq_40868156的博客
05-07 204
封装音频播放功能的工具方法，js，es6，前端，工程化
ts函数？
FENGZXCjjjjj的博客
05-11 132
只要参数类型是匹配的，那么就认为它是有效的函数类型，而不在乎参数名是否正确。第二部分是返回值类型。对于返回值，我们在函数和返回值类型之前使用( =>)符号，使之清晰明了。如之前提到的，返回值类型是函数类型的必要部分，如果函数没有返回任何值，你也必须指定返回值类型为 void而不能留空。函数的类型只是由参数类型和返回值组成的。函数中使用的捕获变量不会体现在类型里。实际上，这些变量是函数的隐藏状态并不是组成API的一部分。
double.vue:79 Uncaught (in promise) DOMException: Failed to execute 'open' on 'XMLHttpRequest': Invalid URL
05-30
这错误提示是由于在 double.vue 文件第79行中，XMLHttpRequest 的 open() 方法传递了一个无效的 URL 导致的。你可以检查一下代码中传递的 URL 是否正确。可能是拼写错误或者是 URL 格式错误。如果你不能发现问题所在，可以提供更多代码或错误信息以便更好地帮助你解决问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值