„Die Hide-Methode von Bootsrap-Vue Modal ist ungültig“

Question

Ich habe ein einfaches bootstrap-vue-Modal, das einen Eingabetext enthält. Ich möchte, dass die Schaltfläche Ok 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.

<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>

我尝试的语法:

        this.$refs.grfSaveModal.hide();
        this.$refs['grfSaveModal'].hide();
        this.$bvModal.hide('grfSaveModal');

Answer 1

编辑：你使用了v-model吗？将数据传递给v-model，并在需要时更新它

你还有另一个选择。

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

或者你可以使用v-model属性来控制Bootstrap Vue模态框。

请查看文档。

Answer 2

问题在于您试图在同一个时刻关闭它，同时又阻止它关闭。

您可以通过使用this.$nextTick将隐藏方法延迟到下一个时刻来解决这个问题。

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