"Kaedah sembunyikan Bootsrap-Vue Modal adalah tidak sah"

Question

Saya mempunyai bootstrap-vue modal yang mengandungi teks input. Saya mahu butang Ok tidak ditutup secara automatik apabila saya menekannya, jadi saya menggunakan "halang". Kemudian saya melakukan beberapa pengesahan dan kemudian mahu menutupnya menggunakan kaedah "sembunyikan". Tetapi tidak berkesan untuk saya. Perkara yang aneh ialah kaedah persembahan berfungsi dengan baik. Saya menyemak dokumentasi dan tidak dapat mencari di mana ralatnya. Bagaimanakah cara saya membuat kaedah sembunyikan berfungsi untuk saya pada ketika itu? Inilah kod saya.

eksport lalai {
  nama: "GrafTopMenu",
  komponen: {
    GrafEditor,
  },
  data() {
    kembali {
      // menyimpan nama yang pengguna berikan kepada graf tersuai yang akan disimpan.
      grfModalPersoName: "",
    };
  },
  dikira: {},
  kaedah: {
    /**tindakan yang dilakukan oleh butang simpan graf tersuai*/
    grfSaveBtnPredefActions() {
      biarkan errormsg = ""

      jika (this.grfTableGrafica.tableConf.items.length == 0) {
        errormsg += errormsg + "Tidak boleh menyimpan graf kosong";
      }

      jika (!errormsg) {
        this.$refs.grfSaveModal.show();
      } lain {
        generalUtils.makeToast(
          "bahaya",
          3000,
          "Anda tidak boleh menyimpan graf kosong."
        );
      }
    },

    grfModalOk() {
      jika (!this.grfModalPersoName.trim()) {
        generalUtils.makeToast(
          "bahaya",
          3000,
          "Nama itu tidak boleh kosong."
        );
      } lain {
        console.log("ok");
        console.log("this.grfModalPersoName :>> ", this.grfModalPersoName);
        console.log("this.grfTableGrafica", this.grfTableGrafica);
        ini.$refs["grfSaveModal"].hide();
        // this.$refs.grfSaveModal.hide();
      }
    },

    grfModalCancel() {
      this.grfModalPersoName = "";
    },
  },
};





我尝试的语法：
        this.$refs.grfSaveModal.hide();
        this.$refs['grfSaveModal'].hide();
        this.$bvModal.hide('grfSaveModal');
            

Answer 1

Sunting: Adakah anda menggunakan v-model? Hantar data ke v-model dan kemas kini jika perlu

Anda ada pilihan lain.

<b-modal id="bv-modal-example" hide-footer></b-modal>
//在script标签中
this.$bvModal.hide('bv-modal-example')

Atau anda boleh menggunakan atribut v-model untuk mengawal kotak modal Bootstrap Vue.

Sila semak Dokumentasi.

Answer 2

Masalahnya ialah anda cuba menutupnya pada masa yang sama sambil menghalangnya daripada menutup.

Anda boleh menyelesaikan masalah ini dengan menangguhkan kaedah tersembunyi sehingga detik seterusnya menggunakan this.$nextTick.

this.$nextTick(() => {      
  this.$bvModal.hide('grfGuardarModal')
})