uni-app 使用v-if控制movable-area时莫名报错

操作步骤：

使用v-if切换元素状态即可

预期结果：

应该无报错

实际结果：

莫名报错，即使先销毁movable-view再去销毁外层依旧报错

bug描述：

使用v-if控制movable-area时，会报Uncaught TypeError: Cannot read properties of null (reading ‘children’) at uni-app-view.umd.js:7

<movable-area  
    style="  
      background-color: blue;  
      position: fixed;  
      top: 10px;  
      left: 10px;  
      width: 300px;  
      height: 400px;  
    "  
    v-if="showPreview"  
  >  
    <movable-view style="background-color: red; width: 20px; height: 20px"></movable-view>  
</movable-area>

表格

项目	信息
产品分类	uniapp/App
PC开发环境操作系统	Windows
PC开发环境操作系统版本号	window11
HBuilderX类型	正式
HBuilderX版本号	4.75
手机系统	Android
手机系统版本号	Android 11
手机厂商	华为
手机机型	meta 60 pro
页面类型	vue
vue版本	vue3
打包方式	云端
项目创建方式	HBuilderX

更多关于uni-app 使用v-if控制movable-area时莫名报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

yibo5220 1楼

该bug反馈内容基本完整但存在关键缺失：未提供showPreview变量变化的具体逻辑（如切换时机、是否异步）及完整组件上下文，代码示例无法直接运行；复现步骤过于简略，仅"使用v-if切换"缺乏操作细节；分类信息中未明确项目类型（uni-app/vue还是uni-app-x/uvue）。实际报错"Cannot read properties of null (reading ‘children’)"表明v-if销毁movable-area时框架内部存在空引用问题，结合知识库movable-area文档可知该组件需设置宽高且对销毁流程敏感。用户使用HBuilderX 4.75（非最新版），可能存在已修复的底层问题。建议补充完整可复现代码、showPreview变更逻辑，并升级至HBuilderX 4.86+测试；同时注意uni-app组件规范中强调的"movable-view必须是movable-area的直接子节点"要求，避免因结构问题引发异常。若为uni-app-x项目需特别注意其平台差异说明。内容为 AI 生成，仅供参考

更多关于uni-app 使用v-if控制movable-area时莫名报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

eggper 2楼

movable-area 内没有movable-view不会报错

itying888 3楼

这个有解决办法吗确实恶心虽然不影响功能

ionicwang 4楼

这是一个已知的 uni-app 框架在处理 movable-area 组件与 v-if 指令时的兼容性问题。错误 Cannot read properties of null (reading 'children') 通常发生在组件销毁阶段，框架内部在尝试访问已不存在的 DOM 节点时发生。

核心原因：movable-area 组件在底层实现上依赖于原生视图层（如 WebView 或原生组件）的特定生命周期。当使用 v-if 直接控制其显示/隐藏时，Vue 的虚拟 DOM 销毁和重建过程可能与原生组件的卸载时序不同步，导致框架内部在清理时引用了一个已被释放的节点。

建议的解决方案：

使用 v-show 替代 v-if：这是最直接有效的解决方法。v-show 通过 CSS 的 display 属性控制显示，不会触发组件的销毁和重建，从而避免了生命周期冲突。
```
<movable-area v-show="showPreview">
  
</movable-area>
```