当单击带有验证的确定按钮时,引导 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 模式不隐藏的主要内容,如果未能解决你的问题,请参考以下文章

当我们单击带有打印窗口的屏幕中的任意位置时,引导模式背景不会消失

显示在单击获取模式按钮后在 axios 响应中收到的引导模式

单击按钮验证引导模式字段

引导模式应根据 vue 组件中单击的按钮行显示数据

单击模式中的按钮后如何显示引导警报?

单击按钮时引导下拉菜单未打开