在vue.js中更新数据时如何关闭模态？

Question

我是 vue.js 新手，我尝试在更新数据时关闭模式。
我写这个是为了铅笔：

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

这适用于modal：

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

这是功能：

holidaysTypeUpdate(value, holidayID) {
  console.log("Modal title:", value);
  console.log("Value id: ", holidayID);
  this.$bvModal.hide(value);

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

我的问题是，当我不更改数据中的任何内容并按更新时，模式会关闭，但是当我更改数据时，数据会更改但模式不会关闭。我该如何解决这个问题？

Answer 1

您的问题可能是由于

session.put

的异步性质而出现的。我的猜测是，模式在请求完成之前关闭。如果请求需要更长的时间，模式可能不会按预期关闭。

通过移动

this.$bvModal.hide(value);

的

then

块内的

session.put

线来修复此问题。这样，模式只会在请求完成后关闭：

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