<p>Ich habe ein einfaches <code>bootstrap-vue-Modal</code>, das einen <code>Eingabetext</code> enthält. Ich möchte, dass die Schaltfläche <code>Ok</code> nicht automatisch geschlossen wird, wenn ich sie drücke, also verwende ich „Verhindern“. Dann führe ich eine Validierung durch und möchte sie dann mit der Methode „ausblenden“ schließen. Funktioniert aber bei mir nicht. Das Merkwürdige ist, dass die Show-Methode völlig einwandfrei funktioniert. Ich habe die Dokumentation überprüft und kann nicht finden, wo der Fehler liegt. Wie sorge ich dafür, dass die Methode zum Ausblenden an diesem Punkt für mich funktioniert? Hier ist mein Code. </p> <pre class="brush:js;toolbar:false;"><template> <div> <b-Taste Größe="sm" class="m-2" Variante="primär" @click="grfGuardarBtnPredefAccions()" >Personalisierte Grafik anzeigen</b-Taste > <b-modal id="grfModalGuardar" ref="grfGuardarModal" title="Namen einfügen" @ok.prevent="grfModalOk" @cancel="grfModalCancel" > <p> Sie müssen der personalisierten Grafik einen Namen zuweisen, den Sie schützen möchten. </p> <b-form-input v-model="grfModalPersoName" placeholder="Hier schreiben ..." ></b-form-input> </b-modal> </div> </template> <script> Standard exportieren { Name: "GrafTopMenu", Komponenten: { GrafEditor, }, Daten() { zurückkehren { // speichert den Namen, den der Benutzer dem zu speichernden benutzerdefinierten Diagramm gibt. grfModalPersoName: "", }; }, berechnet: {}, Methoden: { /**Aktionen, die von der Schaltfläche „Benutzerdefiniertes Diagramm speichern“ ausgeführt werden*/ grfSaveBtnPredefActions() { let errormsg = "" if (this.grfTableGrafica.tableConf.items.length == 0) { errormsg += errormsg + "Ein leeres Diagramm kann nicht gespeichert werden"; } if (!errormsg) { this.$refs.grfSaveModal.show(); } anders { generalUtils.makeToast( „Gefahr“, 3000, „Sie können ein leeres Diagramm nicht speichern.“ ); } }, grfModalOk() { if (!this.grfModalPersoName.trim()) { generalUtils.makeToast( „Gefahr“, 3000, „Der Name darf nicht leer sein.“ ); } anders { console.log("ok"); console.log("this.grfModalPersoName :>> ", this.grfModalPersoName); console.log("this.grfTableGrafica", this.grfTableGrafica); this.$refs["grfSaveModal"].hide(); // this.$refs.grfSaveModal.hide(); } }, grfModalCancel() { this.grfModalPersoName = ""; }, }, }; </script> <Stil> </style> </pre> <p>我尝试的语法:</p> <pre class="brush:js;toolbar:false;"> this.$refs.grfSaveModal.hide(); this.$refs['grfSaveModal'].hide(); this.$bvModal.hide('grfSaveModal'); </pre>

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

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