我有一个简单的bootstrap-vue modal，其中包含一个input text。我希望按下Ok按钮时不会自动关闭，所以我使用了"prevent"。然后我进行一些验证，然后希望使用"hide"方法关闭它。但是对我来说不起作用。奇怪的是show方法完全正常工作。我查看了文档，找不到错误所在。如何使hide方法在那一点上对我起作用？ 这是我的代码。

<template>
  <div>
    <b-button
      size="sm"
      class="m-2"
      variant="primary"
      @click="grfGuardarBtnPredefAccions()"
      >Guardar gráfica personalizada</b-button
    >

    <b-modal
      id="grfModalGuardar"
      ref="grfGuardarModal"
      title="Insertar nombre"
      @ok.prevent="grfModalOk"
      @cancel="grfModalCancel"
    >
      <p>
        Debe asignar un nombre a la gráfica personalizada que desea guardar.
      </p>
      <b-form-input
        v-model="grfModalPersoName"
        placeholder="Escriba aquí ..."
      ></b-form-input>
    </b-modal>
  </div>
</template>

<script>
export default {
  name: "GrafTopMenu",
  components: {
    GrafEditor,
  },
  data() {
    return {
      // almacena el nombre que el usuario le pone a la gráfica personalizada que va a guardar.
      grfModalPersoName: "",
    };
  },
  computed: {},
  methods: {
    /** acciónes que realiza el botón de guardar gráfica personalizada*/
    grfGuardarBtnPredefAccions() {
      let errormsg = "";

      if (this.grfTableGrafica.tableConf.items.length == 0) {
        errormsg += errormsg + "No puede guardar una gráfica vacía";
      }

      if (!errormsg) {
        this.$refs.grfGuardarModal.show();
      } else {
        generalUtils.makeToast(
          "danger",
          3000,
          "No puede guardar una gráfica vacía"
        );
      }
    },

    grfModalOk() {
      if (!this.grfModalPersoName.trim()) {
        generalUtils.makeToast(
          "danger",
          3000,
          "El nombre no puede estar vacío"
        );
      } else {
        console.log("ok");
        console.log("this.grfModalPersoName :>> ", this.grfModalPersoName);
        console.log("this.grfTableGrafica", this.grfTableGrafica);
        this.$refs["grfGuardarModal"].hide();
        // this.$refs.grfGuardarModal.hide();
      }
    },

    grfModalCancel() {
      this.grfModalPersoName = "";
    },
  },
};
</script>

<style>
</style>

我尝试的语法：

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