Bootstrap-Vue Modal阻止ok默认关闭后hide方法不生效问题求解

问题原因 #

你提供的代码中存在未定义变量报错，导致hide()方法未被执行：
你的grfModalOk方法里打印了this.grfTableGrafica，但该变量没有在当前组件的data、props或computed中声明，访问未定义变量会抛出JS错误，直接中断后续代码运行，所以hide()方法根本没有被调用。

修复步骤 #

1. 首先删除或修正涉及未定义变量grfTableGrafica的代码，确认浏览器控制台没有报错。
2. 推荐用更符合BootstrapVue规范的写法替代prevent修饰符：
   BootstrapVue的b-modal的@ok事件支持返回false来阻止默认关闭行为，不需要手动加prevent修饰符，校验通过后会自动关闭弹窗，不需要手动调用hide()：

<!-- 把@ok.prevent改成@ok -->
<b-modal
  id="grfModalGuardar"
  ref="grfGuardarModal"
  title="Insertar nombre"
  @ok="grfModalOk"
  @cancel="grfModalCancel"
>

对应的方法调整为：

grfModalOk() {
  if (!this.grfModalPersoName.trim()) {
    generalUtils.makeToast(
      "danger",
      3000,
      "El nombre no puede estar vacío"
    );
    // 校验不通过返回false，阻止弹窗关闭
    return false
  }
  // 校验通过直接写业务逻辑即可，弹窗会自动关闭
  console.log("ok");
  console.log("this.grfModalPersoName :>> ", this.grfModalPersoName);
  // 这里删除未定义的grfTableGrafica相关代码，或者补充定义该变量
}

3. 如果你确实需要手动调用hide()，排除报错后可以用$nextTick包裹确保调用生效：

// 校验通过后执行
this.$nextTick(() => {
  // 三种写法任选一种都可以生效，优先用$bvModal的写法更稳定
  this.$bvModal.hide('grfModalGuardar')
})

内容的提问来源于stack exchange，提问作者bibu3344