我在创建一个模态框表单。我的问题是点击ok按钮时,模态框会关闭。但是,我想在关闭之前进行表单验证,如果没通过验证则阻止其关闭。 我试着使用 event.preventDefault() ,但是报错:undefined error

    <vuestic-modal 
        ref="approveModal"
        okText="Approve"
        cancelText="Cancel"
        okClass="btn btn-micro btn-primary"
        cancelClass="btn btn-secondary btn-micro"
        @ok="sendApprove"
        noOutsideDismiss: true
        >
        <p slot="title">Add an Account Number</p>
        <div class="form-group">
            <div class="input-group">
              <input type="number"
              id="acctNo"
              name="acctNo"
              v-model="accountNumber"
              required/>
              <label class="control-label" for="accNo">Account Number</label>
              <i class="bar"></i>
              <p v-if="errors.length">
                <b>Please correct the following error(s):</b>
                <ul>
                  <li v-for="error in errors" :value="error.value" :key="error.index">{{ error }}</li>
                </ul>
             </p>
            </div>
        </div>
    </vuestic-modal>
   sendApprove() {
      let self = this
      if (!this.accountNumber) {
        this.errors.push('A valid account number with min 3 digits is required.');
      }
      console.log(this.errors)
      if(this.accountNumber) {
        this.$log.info('accountNumber:', this.accountNumber)
        this.$log.info('accountToApprove', this.accountToApprove)
        approveApplication({app: this.accountToApprove, acct: this.accountNumber}).then(res => {
        this.$log.info(res)
        if (res && res.status === '200') {
          self.accountNumber = ''
          self.loadApplicants()
        }
        })
      }
    }
2020-12-07 20:50创建
共1个回答
UJ
游客uJLTPs

可以通过hideDefaultActions属性:

<va-modal
  v-model="showFullScreenModal"
  :fullscreen="true"
  hideDefaultActions
>
  <template slot="actions">
    <va-button
      v-if="cancelText"
      color="gray"
      flat
      @click="cancel"
    >
      {{ cancelText }}
    </va-button>
    <va-button @click="ok">
      {{ okText }}
    </va-button>
  </template>
</va-modal>