记录 element-ui v-loading 指令 instance.close() 报错问题

最新推荐文章于 2024-03-11 20:20:29 发布

eno_zeng

最新推荐文章于 2024-03-11 20:20:29 发布

阅读量1.7k

点赞数

文章标签：前端 elementui

本文链接：https://blog.youkuaiyun.com/z_e_n_g/article/details/123884795

版权

本文记录了一个关于Element-Plus框架中v-loading指令使用时遇到的TypeError问题。当v-loading初始值为undefined,然后变为false时，由于未创建实例，调用instance.close()会报错。分析了问题原因在于列表项加载数据的v-loading初始值应为boolean，而非undefined。建议始终确保v-loading传入布尔值，以避免此类问题。同时，该问题在Element-Plus的2.x版本中存在，不确定3.x是否已修复。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

记录 element-ui v-loading 指令 instance.close() 报错问题

背景

解决 sentry issues 时看到一个这样的报错

TypeError: Cannot read properties of undefined (reading ‘close’)

报错的代码来自 element-plus 的 v-loading 指令, 在值变为 false 执行 close 函数时, 示例 instance 为空导致的问题

原因

页面是列表页, 每个列表项有一个展开加载数据的 v-loading, 代码给 v-loading 初始值传入了 undefined, 请求数据之前给 loading 做了个初始化, 将 loading 值初始为 false

v-loading="expendStepData[item.productOrderId]?.loading"

数据从 undefined 变成 false 触发了 v-loading 的 update, 因为值为 false, 所以 v-loading 执行了 close 操作, 因为 loading 的值从来没有是 true, 所以没有创建实例, 导致 instance 为 undefined, 所以执行 instance.close() 自然就报错了

element-plus loading 代码

const vLoading = {
  mounted(el, binding) {
    if (!!binding.value) {
      createInstance(el, binding);
    }
  },
  updated(el, binding) {
    const instance = el.instance;
    if (binding.oldValue !== binding.value) {
      if (binding.value) {
        createInstance(el, binding);
      } else {
        instance.close();
      }
    }
  },
  unmounted(el) {
    var _a;
    (_a = el == null ? void 0 : el.instance) == null ? void 0 : _a.close();
  }
};

初始值为 undefined 导致 mounted 的时候没有创建实例, 而值从 undefined 变为 false 时, 会触发 update, 导致执行 instance.close(), 这个时候 v-loading 的 instance 没有创建是一个 undefined

建议

v-loading 严格传入 boolean 值, 虽然大多数情况不会有问题, 即使像我这样的情况, 其实也不影响使用, 如果不是 sentry, 估计页没有发现这个问题, 但是能避免的问题还是要避免; 我的 element-plus 时候 2.x 版本的, 不知道 3.x 是否还有这个问题