"The hide method of Bootsrap-Vue Modal is invalid"

Question

I have a simple bootstrap-vue modal that contains an input text. I want the Ok button to not automatically close when I press it, so I use "prevent". Then I do some validation and then want to close it using the "hide" method. But doesn't work for me. The strange thing is that the show method works completely fine. I checked the documentation and can't find where the error is. How do I make the hide method work for me at that point? Here 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 {
      // stores the name that the user gives to the custom graph that is going to be saved.
      grfModalPersoName: "",
    };
  },
  computed: {},
  methods: {
    /**actions performed by the save custom graph button*/
    grfSaveBtnPredefActions() {
      let errormsg = "";

      if (this.grfTableGrafica.tableConf.items.length == 0) {
        errormsg = errormsg "Cannot save an empty graph";
      }

      if (!errormsg) {
        this.$refs.grfSaveModal.show();
      } else {
        generalUtils.makeToast(
          "danger",
          3000,
          "You cannot save an empty graph."
        );
      }
    },

    grfModalOk() {
      if (!this.grfModalPersoName.trim()) {
        generalUtils.makeToast(
          "danger",
          3000,
          "The name cannot be empty."
        );
      } else {
        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>

<style>
</style>

我尝试的语法：

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

Answer 1

Edit: Did you use v-model? Pass data to v-model and update it if needed

You have another option.

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

Or you can use the v-model attribute to control the Bootstrap Vue modal box.

Please check Documentation.

Answer 2

The problem is that you are trying to close it at the same moment while preventing it from closing.

You can solve this problem by deferring the hidden method to the next moment using this.$nextTick.

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