Bootsrap-Vue Modal hide method not working

Question

I have a simple bootstrap-vue modal with a input text. I want that pressing the Ok button does not close automatically, so I use "prevent". Then I do some validation and then I want it to close with the "hide" method. However it doesn't work for me. The weird thing is that the show method does work perfectly. I have looked at the documentation and can't find where the error is. How do I make the hide method work for me at that point? There is my code.

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

Sintax i tried:

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

Answer 1

The issue is that you're trying to close it in the same tick as preventing it from closing.

You can get around this by using this.$nextTick to delay your hide method until the next tick.

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