解决TypeError: Cannot read properties of null (reading ‘insertBefore‘)

2 篇文章 0 订阅
2 篇文章 0 订阅

经排查是element-plus的el-table组件,如果v-if使用不当,更到线上就会报错,如下图:

本地调试是正常的,经反复调试发现,是cloumn中使用了一个方法,但这个未对数据进行非空判断造成的。

这是错误写法:

改变后的正确写法:

如果不想改变模块,也可以在方法中套一层if判断,值为true时才操作:

完美解决!


网上也有一些方案是说因为在cloumn中使用了v-if的判断,造成了空指针,此种情况可以使用js可选链解决例如下图,本章不做过多赘述。

<div v-if="_data.form.files?.file"></div>

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
"Cannot read properties of null (reading 'nextSibling')"这个错误通常是因为尝试在一个值为null的对象上访问属性或方法而导致的。根据你提供的引用,这个错误可能与HTML/XML节点操作有关。 在IE中,nextSibling属性不会返回文本节点,而在Chrome或Firefox等其他浏览器中会返回文本节点。这意味着,在使用nextSibling属性时,如果下一个节点是文本节点,那么在IE中可能会遇到null值的情况。因此,当你尝试在这个null值上使用nextSibling属性时,就会出现"Cannot read properties of null (reading 'nextSibling')"的错误。 另外,在el-table-column渲染时,如果scope.row.field(field为任意字段值)不存在,直接对其执行length、toString()等方法也会导致报错。这是因为当scope.row.field不存在时,它的值为null或undefined,而这些值是没有length和toString()方法的。因此,如果你尝试在不存在的字段上执行这些方法,就会出现类似的错误。 最后,当默认弹框是关闭的时,DOM中没有弹框中的内容。但是,当你打开弹框并关闭后,弹框中的DOM元素并没有被销毁,仍然存在于DOM中。如果你尝试操作这些不应该存在的DOM元素,就可能会导致类似的报错。 综上所述,"Cannot read properties of null (reading 'nextSibling')"错误可能由于在null值上访问属性或方法而导致。在HTML/XML节点操作中,特别是使用nextSibling属性、在不存在的字段上执行方法或尝试操作不应该存在的DOM元素时,请确保先进行必要的检查和验证,以避免这个错误的发生。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值