Vue.js 单击带有验证的“确定”按钮时,boostrap vue模式不隐藏
我想将验证添加到一个模式窗口中,我需要一种行为,在这种行为中,当单击OK按钮(表单提交)时,将进行验证,如果结果是否定的,则窗口不应关闭 我的情态Vue.js 单击带有验证的“确定”按钮时,boostrap vue模式不隐藏,vue.js,validation,bootstrap-modal,bootstrap-vue,Vue.js,Validation,Bootstrap Modal,Bootstrap Vue,我想将验证添加到一个模式窗口中,我需要一种行为,在这种行为中,当单击OK按钮(表单提交)时,将进行验证,如果结果是否定的,则窗口不应关闭 我的情态 <b-modal size="lg" id="modalToRepair" title="Add Problem" title-class="font-18" centered body-class="p-4" no-
<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>
是否可能?在
@ok
事件中使用的方法传递了一个事件,如果要阻止模式关闭,可以调用该事件.preventDefault()
onClickModalRepair(bvModalEvt){
this.typesubmit=true;
这个。$v.$touch();
如果(此.$v.$invalid){
bvModalEvt.preventDefault();
返回;
}
}
你可以在地图上看到一个例子
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
}
}