当单击带验证的确定按钮时，引导vue模式不会隐藏

Question

我想将验证添加到模式窗口，我需要一个行为，当单击OK按钮(表单提交)时，验证将发生，如果结果是否定的，窗口不应该关闭

我的模式

<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
  }
}

有可能吗？

Answer 1

@ok事件中使用的方法被传递了一个事件，如果您想要阻止模式关闭，您可以对该事件调用.preventDefault()。

onClickModalRepair(bvModalEvt) {
  this.typesubmit = true;
  this.$v.$touch();
  if (this.$v.$invalid) {        
    bvModalEvt.preventDefault();
    return;
  }
}

你可以在docs上看到一个这样的例子。