当单击带有验证的确定按钮时,引导 vue 模式不隐藏
Posted
技术标签:
【中文标题】当单击带有验证的确定按钮时,引导 vue 模式不隐藏【英文标题】:boostrap vue modal not hide when click ok button with validation 【发布时间】:2021-02-14 05:46:40 【问题描述】:我想向模态窗口添加验证,我需要一种行为,当单击“确定”按钮(表单提交)时,将进行验证,如果结果是否定的,则窗口不应关闭
我的模态
<b-modal
size="lg"
id="modalToRepair"
title="Add Problem"
title-class="font-18"
centered
body-class="p-4"
no-close-on-backdrop
no-close-on-esc
@ok="onClickModalRepair"
>
<div class="row">
<div class="col-lg-12">
<div class="form-group row">
<label class="col-4 col-form-label">
Repair Problem
<span class="text-danger">*</span>
</label>
<div class="col-8">
<input
v-model="theProblem"
type="text"
class="form-control"
placeholder="Input problem"
name="theProblem"
:class="
'is-invalid': typesubmit && $v.theProblem.$error
"
/>
<div
v-if="typesubmit && $v.theProblem.$error"
class="invalid-feedback"
>
<span v-if="!$v.theProblem.required">Requred field.</span>
</div>
</div>
</div>
</div>
</div>
</b-modal>
和我的方法
Vue.js
methods:
onClickModalRepair()
this.typesubmit = true;
this.$v.$touch();
if (this.$v.$invalid)
this.$bvModal.show("modalToRepair"); // not work - modal hide
//code for not hide this modal
return;
,
validations:
theProblem:
required
有可能吗?
【问题讨论】:
【参考方案1】:@ok
事件中使用的方法是传递一个事件,如果你想阻止模态框关闭,可以调用.preventDefault()
on。
onClickModalRepair(bvModalEvt)
this.typesubmit = true;
this.$v.$touch();
if (this.$v.$invalid)
bvModalEvt.preventDefault();
return;
您可以在docs 上查看此示例。
【讨论】:
以上是关于当单击带有验证的确定按钮时,引导 vue 模式不隐藏的主要内容,如果未能解决你的问题,请参考以下文章
当我们单击带有打印窗口的屏幕中的任意位置时,引导模式背景不会消失