cari

Rumah  >  Soal Jawab  >  teks badan

"Kaedah sembunyikan Bootsrap-Vue Modal adalah tidak sah"

<p>Saya mempunyai <code>bootstrap-vue modal</code> yang mengandungi <kod>teks input</code>. Saya mahu butang <kod>Ok</code> 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. </p> <pre class="brush:js;toolbar:false;"><template> <div> <b-butang saiz="sm" kelas="m-2" varian="utama" @click="grfGuardarBtnPredefAccions()" >Guardar gráfica personalizada</b-button > <b-modal id="grfModalGuardar" ref="grfGuardarModal" title="Sisipkan nombre" @ok.prevent="grfModalOk" @cancel="grfModalCancel" > <p> Debe asignar un nombre a la gráfica personalizada que desea guardar. </p> <b-bentuk-input v-model="grfModalPersoName" pemegang tempat="Escriba aquí ..." ></b-form-input> </b-modal> </div> </template> <skrip> 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 = ""; }, }, }; </skrip> <gaya> </style> </pra> <p>我尝试的语法:</p> <pre class="brush:js;toolbar:false;"> this.$refs.grfSaveModal.hide(); this.$refs['grfSaveModal'].hide(); this.$bvModal.hide('grfSaveModal'); </pra>
P粉428986744P粉428986744460 hari yang lalu589

membalas semua(2)saya akan balas

  • P粉020556231

    P粉0205562312023-08-26 15:11:58

    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.

    balas
    0
  • P粉344355715

    P粉3443557152023-08-26 11:19:55

    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')
    })
    

    balas
    0
  • Batalbalas