"Bootsrap-Vue Modal的hide方法无效"
<p>我有一个简单的<code>bootstrap-vue modal</code>，其中包含一个<code>input text</code>。我希望按下<code>Ok</code>按钮时不会自动关闭，所以我使用了"prevent"。然后我进行一些验证，然后希望使用"hide"方法关闭它。但是对我来说不起作用。奇怪的是show方法完全正常工作。我查看了文档，找不到错误所在。如何使hide方法在那一点上对我起作用？
这是我的代码。</p>
<pre class="brush:js;toolbar:false;"><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>
</pre>
<p>我尝试的语法：</p>
<pre class="brush:js;toolbar:false;"> this.$refs.grfGuardarModal.hide();
this.$refs['grfGuardarModal'].hide();
this.$bvModal.hide('grfGuardarModal');
</pre>
2
925
收藏
编辑：你使用了v-model吗？将数据传递给v-model，并在需要时更新它
你还有另一个选择。
<b-modal id="bv-modal-example" hide-footer></b-modal> //在script标签中 this.$bvModal.hide('bv-modal-example')或者你可以使用v-model属性来控制Bootstrap Vue模态框。
请查看文档。
问题在于您试图在同一个时刻关闭它，同时又阻止它关闭。
您可以通过使用
this.$nextTick将隐藏方法延迟到下一个时刻来解决这个问题。this.$nextTick(() => { this.$bvModal.hide('grfGuardarModal') })