ElementPlusError: [ElOnlyChild] no valid child node found

最新推荐文章于 2024-06-29 09:31:24 发布

原创最新推荐文章于 2024-06-29 09:31:24 发布 · 1.5k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

记录一起使用Element Plus时出现的错误，错误信息如下：

ElementPlusError: [ElOnlyChild] no valid child node found
at debugWarn (error.ts:13:37)
at Proxy.<anonymous> (only-child.tsx:39:11)
at renderComponentRoot (runtime-core.esm-bundler.js:834:16)
at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5852:26)
at ReactiveEffect.run (reactivity.esm-bundler.js:178:19)
at instance.update (runtime-core.esm-bundler.js:5902:51)
at updateComponent (runtime-core.esm-bundler.js:5729:18)
at processComponent (runtime-core.esm-bundler.js:5664:7)
at patch (runtime-core.esm-bundler.js:5128:11)
at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5861:9)

而且也没法定位到具体是哪行代码报的错，只能一行行的逐渐排查，终于定位到如下的代码：

  <el-button-group >
    <el-tooltip content="编辑" placement="bottom">
      <el-button v-if="c.categoryId" size="small" :icon="EditPen" @click="onShowUpdateDialog(c)"></el-button>
    </el-tooltip>
    <el-tooltip content="移除" placement="bottom">
      <el-button v-if="c.categoryId" size="small" :icon="Close" @click="onRemove(c)"></el-button>
    </el-tooltip>
  </el-button-group>

出现这种错误的原因是el-tooltip的子元素用到了v-if，有可能造成子元素为空，所以正确的解决办法是把v-if放在el-tooltip或el-tooltip的父元素上，修正后的代码如下：

  <el-button-group v-if="c.categoryId">
    <el-tooltip content="编辑" placement="bottom">
      <el-button size="small" :icon="EditPen" @click="onShowUpdateDialog(c)"></el-button>
    </el-tooltip>
    <el-tooltip content="移除" placement="bottom">
      <el-button size="small" :icon="Close" @click="onRemove(c)"></el-button>
    </el-tooltip>
  </el-button-group>