"Bootsrap-Vue Modal的hide方法无效"
P粉428986744
2023-08-25 17:59:43
<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>
</模板>
<脚本>
导出默认值{
名称：“GrafTopMenu”，
成分： {
格拉夫编辑，
},
数据（） {
返回 {
// 存储用户为要保存的自定义图表指定的名称。
grfModalPersonName: "",
};
},
计算：{}，
方法： {
/**通过保存自定义图表按钮执行的操作*/
grfSaveBtnPredefActions() {
让 errormsg = "";
if (this.grfTableGrafica.tableConf.items.length == 0) {
errormsg += errormsg + “无法保存空图表”;
}
如果（！错误消息）{
this.$refs.grfSaveModal.show();
} 别的 {
GeneralUtils.makeToast(
“危险”，
3000,
“您无法保存空图表。”
）；
}
},
grfModalOk() {
if (!this.grfModalPersoName.trim()) {
GeneralUtils.makeToast(
“危险”，
3000,
“名称不能为空。”
）；
} 别的 {
console.log(“确定”);
console.log(“this.grfModalPersoName :>>”, this.grfModalPersoName);
console.log("this.grfTableGrafica", this.grfTableGrafica);
this.$refs[“grfSaveModal”].hide();
// this.$refs.grfSaveModal.hide();
}
},
grfModalCancel() {
this.grfModalPersoName = “”;
},
},
};
</脚本>
<风格>
</风格>
</前>
<p>我尝试的语法：</p>
<pre class="brush:js;toolbar:false;"> this.$refs.grfSaveModal.hide();
this.$refs['grfSaveModal'].hide();
this.$bvModal.hide('grfSaveModal');
</前>
编辑：你使用了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') })