Bootstrap-Vue Modal 隐藏方法不起作用

Question

我有一个简单的 bootstrap-vue modal 和一个 input text。我希望按下 Ok 按钮不会自动关闭，所以我使用“阻止”。然后我做了一些验证，然后我希望它用“隐藏”方法关闭。但是它对我不起作用。奇怪的是 show 方法确实工作得很好。我查看了文档，但找不到错误所在。那时我如何使隐藏方法对我有用？有我的代码。

<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');

Answer 1

编辑：你用过 v-model 吗？将数据传递给 v-model 并随时更新它

你还有一个选择。

<b-modal id="bv-modal-example" hide-footer></b-modal>
//in script tag
this.$bvModal.hide('bv-modal-example')

或者，您可以为 bootstrap vue 模态框使用 v-model 属性。

请检查documentation。

Answer 2

问题是您试图在阻止它关闭的同时关闭它。

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

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

Bootstrap-Vue Modal 隐藏方法不起作用

Bootsrap-Vue Modal hide method not working

javascript

vue.js

bootstrap-vue