Bootstrap-Vue 模态隐藏方法不起作用答案

【问题标题】：Bootsrap-Vue Modal hide method not workingBootstrap-Vue 模态隐藏方法不起作用
【发布时间】：2021-10-26 16:20:06
【问题描述】：

我有一个简单的bootstrap-vue modal 和一个input text。我希望按下Ok 按钮不会自动关闭，所以我使用“防止”。然后我做了一些验证，然后我希望它用“隐藏”方法关闭。但是它对我不起作用。奇怪的是 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');

【问题讨论】：

标签： javascript vue.js bootstrap-vue

【解决方案1】：

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

您可以通过使用 this.$nextTick 将您的 hide 方法延迟到下一个刻度来解决此问题。

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

【讨论】：

谢谢。我什至不知道“蜱虫”的存在。它工作得很好。我要调查一下那些“蜱虫”是什么。

【解决方案2】：

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

你有另一个选择。

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

或者，您可以将 v-model 属性用于引导 vue 模态。

请查看documentation。

【讨论】：