bootstrap - vue模式隐藏方法不工作

Question

我有一个简单的bootstrap-vue modal与input text。我想按下Ok按钮不会自动关闭，所以我使用"预防"。然后我做一些验证然后我想用"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>

Sintax i tried:

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

Answer 1

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

你可以通过使用this.$nextTick来延迟你的隐藏方法，直到下一个滴答。

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

Answer 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属性作为引导模式。

请查看文档