单击 Vue.Js 中的 "OK" 后关闭模态对话框

Question

概述：在 Vue.js 中，我试图在单击“确定”后关闭模态对话框。目前，它不会在单击“确定”时关闭，而是在单击“取消”时关闭，在框外单击并按 ESC 键。单击按钮后调用的方法也在最后给出。谢谢！

  <b-button-group class="mx-2" size="lg">
      <b-button
            @click="$bvModal.show('modal-1')"
            variant="light" class="border border-muted">
        <strong class="text-muted">Löschen  &raquo;</strong></b-button>
      <b-modal id="modal-1" title="Bitte bestätigen">
        <p class="my-4">Are you sure, you want to delete it?</p>
        <template v-slot:modal-footer="{ ok, cancel,}">
          
      <!-- Emulate built in modal footer ok and cancel button actions -->
      <b-button size="sm" variant="success" @click="okButtonClicked()" > OK </b-button>
      <b-button size="sm" variant="danger" @click="cancel()"> Cancel </b-button>
    </template>
      </b-modal>
    </b-button-group>

方法：{

    okButtonClicked: async function() { 
      let td_id =this.form.TransportDemandsId;
      console.log(this.form.TransportDemandsId);
      let url = "https://localhost:44370/api/transportdemand/abort/" + td_id;
      const res = await axios.delete(url);      
      let data = res.data;
      
      if (data === true) {
        alert("Response: OK. Transport Demand is Deleted: " );
      } else {
        alert("Response: Transport Demand not found");
      };
    }
  }
}

Answer 1

在您的方法 okButtonClicked 中缺少关闭功能。添加 this.$bvModal.hide('modal-1'); in method okButtonClicked 在你想关闭模式的行中。可能在函数的末尾。

单击 Vue.Js 中的 "OK" 后关闭模态对话框

Closing Modal-dialog box after clicking "OK" in Vue.Js

javascript

modal-dialog

vue.js