Vue数据更新后模态框无法关闭，该如何解决？

我是Vue.js新手，点击铅笔图标触发模态框更新假期类型数据，数据已成功更新，但模态框无法关闭，相关代码如下：

触发模态框的铅笔图标代码 #

<i
  class="mdi mdi-pencil"
  @click.prevent="$bvModal.show(type.title)"
></i>

模态框代码 #

<b-modal
  :id="type.title"
  ref="modal"
  title="Update holiday"
  centered
  hide-footer
>
  <FormModal
    cardTitle="Update holiday"
    description=""
    :value="type.title"
    action="update"
    @formData="parseFormData"
    :holidayTypeID="type.id"
  ></FormModal>
</b-modal>

数据更新函数 #

holidaysTypeUpdate(value, holidayID) {
  this.$refs["modal"][0].hide();

  session
    .put(`api/holidays/holiday-type/${holidayID}/action/`, {
      title: value,
    })
    .then(() => {
      this.alertSchema = {
        alertVariant: "success",
        alertMsg: "Holiday updated",
        show: true,
      };
      this.$bvModal.hide("type.title");
      this.fetchHolidayTypes();
    })
    .catch((e) => {
      console.log(e.response.data);
    });
},

问题原因及解决步骤 #

1. ref调用模态框不稳定：this.$refs["modal"][0].hide()依赖索引定位模态框，多模态场景下容易出现索引不匹配的问题，不如官方$bvModal方法可靠，直接移除该行代码。
2. 关闭参数传递错误：this.$bvModal.hide("type.title")传的是字符串常量，而非动态的模态框ID值type.title，导致无法定位到目标模态框，需改成传递变量值。
3. 完善异常处理：请求失败时也应关闭模态框，避免用户陷入操作阻塞状态。

修改后的更新函数 #

// 调用时需传入对应的模态框ID（即type.title）
holidaysTypeUpdate(value, holidayID, modalId) {
  session
    .put(`api/holidays/holiday-type/${holidayID}/action/`, {
      title: value,
    })
    .then(() => {
      this.alertSchema = {
        alertVariant: "success",
        alertMsg: "Holiday updated",
        show: true,
      };
      this.$bvModal.hide(modalId);
      this.fetchHolidayTypes();
    })
    .catch((e) => {
      console.log(e.response.data);
      this.$bvModal.hide(modalId); // 请求失败也关闭模态框
    });
}

补充说明 #

在parseFormData方法中调用holidaysTypeUpdate时，要把当前的type.title作为第三个参数modalId传入，确保关闭的是对应触发的模态框。如果模态框的ref="modal"没有其他用途，可以直接移除，减少不必要的DOM引用。

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