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

最新推荐文章于 2023-09-08 22:35:52 发布
转载 最新推荐文章于 2023-09-08 22:35:52 发布 · 1.3k 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/yifangts/p/7154306.html
文章标签：

#javascript #ViewUI

本文探讨了在使用Vue的v-for指令渲染数组时遇到的DOM更新异常问题及解决方案。当数组发生变化时，页面可能出现卡死现象。解决办法是在v-for的上级元素使用v-if控制DOM的显示与隐藏。

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

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

 

 

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

 

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

vue v-for渲染数据出现DOMException: Failed to execute ‘removeChild‘ on ‘Node‘: The node .....
拥抱AI Design
03-24 3135
本文主要介绍 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.
Vue3 - 解决报错 Uncaught (in promise) DOMException: Failed to execute ‘insertBefore‘ on ‘Node‘: The node
🏆 前端领域优质创作者
08-19 1万+
vue3，报错，vue3报错，Uncaught(inpromise)DOMException:Failedtoexecute'insertBefore'on'Node':Thenodebeforewhichthenewnodeistobeinsertedisnotachildofthisnode，如何解决这个错误，动态渲染，v-if，v-show，insertBefore，详细解决方法，vue3未能在“Node”上执行“insertBefore”：要插入
使用iview实现某些组件时报错Failed to execute removeChild on Node
欢迎来到iceseasyh的博客
06-29 920
完整错误 出现场景 在用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 然后在之...
通过DOM动态删除多个节点报错原因理解
shandamengcheng的博客
08-20 1463
通过DOM动态删除多个节点报错原因理解 在DOM中，我们可以通过removeChild( )来删除元素的子节点，但有时当我们通过循环函数删除一个元素的多个子节点时，浏览器却显示： Failed to execute ‘removeChild’ on ‘Node’: parameter 1 is not of type ‘Node’. 这是什么原因呢？接下来分析几个可能常出现的错误写法. &lt...
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 里面的节...
js报错信息：Failed to execute ‘removeChild‘ on ‘Node‘: The node to be removed is not a child of this node
weixin_44344709的博客
09-08 4004
做的是商品放大镜的效果，有三个事件，鼠标移入（mouseenter）时创建蒙版（maskDiv），鼠标移动（mousemove）时蒙版跟随鼠标移动，鼠标移出（mouseleave）时移除蒙版。因为刚开始将创建蒙版放在了mouseenter事件里，mouseenter和mouseleave事件中都需要对蒙版进行操作，所以将mouseenter和mouseleave放在了mouseenter中嵌套使用。还是没搞懂报错的原因，试了下用传统的on来注册事件再进行这样的事件嵌套时是不会报错的。
Something went wrong: “NotFoundError: Failed to execute ‘removeChild‘ on ‘Node‘: The node to be remo
风口IT猪的成长录
04-17 2009
Something went wrong: "NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node." and the application can't recover.
index.vue:71 Uncaught (in promise) DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. vue3报错
最新发布
07-19
这个错误 `Uncaught (in promise) DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node` 通常发生在 Vue 3 应用中，当尝试移除一个 DOM 节点但该节点...
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项目过程中因为渲染问题的可能原因分析以及解决方案
VuePress在生产环境跳转子页报错 Failed to execute ‘appendChild‘ on ‘Node‘
孙君的空间站
07-25 633
VuePress在生产环境跳转子页报错 Failed to execute 'appendChild' on 'Node'
DOMException: Failed to execute ‘appendChild‘ on ‘Node‘: This node type does not support this method
weixin_52016899的博客
08-30 2356
DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
报错 Failed to execute ‘appendChild‘ on ‘Node‘
weixin_54106595的博客
04-22 2737
一开始整个页面数据刷新后都无法渲染，尝试网上的方法，更改 nuxu.config.js 配置，把plugins路径后的ssr改成了true，可以渲染一部分了，但是子组件部分还是不能渲染出来。 最后：用<client-only></client-only>标签将疑似出问题部分重新包裹（不渲染的子组件） 终于解决了： ...
TypeError: Failed to execute ‘removeChild‘ on ‘Node‘: parameter 1 is not of type ‘Node‘.
qq_44755885的博客
10-18 4659
JS动态删除，for中慎用带有i的元素。
Failed to execute ‘removeChild‘ on ‘Node‘: parameter 1 is not of type ‘Node‘.
qq 117791303
01-26 4754
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(); ...
vue 报错：DOMException: Failed to execute ‘removeChild‘ on ‘Node‘
且听风吟的博客
09-03 8732
在使用vue的时候，我们因为改变了页面的DOM结构，可能会遇见这样的告警信息，并且页面会被卡主，需要刷新才可以解决；但是，在实际项目中，这样的情况肯定是不允许出现的。错误告警如下： "NotFoundError: Failed to execute ‘insertBefore’ on ‘Node’。 如下图： 关于 v-if 和 v-show 两个指令的区别，传送门： v-if 和 v-show 的区别 ...
dialog的close回调总是报错 Failed to execute 'removeChild' on 'Node'
liuhaiquan123521的博客
11-29 5417
代码如下： 解决办法：在弹窗关闭前加延时
Uncaught TypeError: Failed to execute 'removeChild' on 'Node': 1 argument required, but only 0 prese
u010746364的博客
11-30 3万+
function removeChild() { var p2 = document.getElementById("p2"); var body = document.getElementById("body"); body.removeChild(p2); } life mastery of knowledge 这里本来想删除id为p2的这
Vue.js实战：v-for循环渲染详解
"本文主要探讨Vue.js中的v-for循环渲染，包括遍历对象和数组的方法。" Vue.js 是一款流行的前端JavaScript框架，用于构建用户界面。在Vue中，v-for指令是用于动态渲染列表的关键工具，它允许开发者根据数据模型遍历...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值