vue.js - Veevalidate：在 POST 请求之前验证表单？

Question

我正在使用Veevalidate和Buefy在 POST 请求之前验证表单。我能够正确验证表单，但 POST 请求方法在验证之前运行。

我对如何按顺序调用方法有点困惑：

1. 验证表格
2. POST 请求

密码沙盒： https ://codesandbox.io/s/mj1vy2vq0j

代码概述

<b-modal>
  <form @submit.prevent="validateBeforeSubmit">
    ...
    ...
    <button type="submit" class="button is-primary" @click="postItem()">Submit</button>
    <button type="button" class="button" @click="isAddModalActive=false">Cancel</button>
  </form>
</b-modal>

<script>

...

methods: {
  validateBeforeSubmit() {
    this.$validator.validateAll().then(result => {
      if (result) {
        this.$toast.open({
          message: "Form is valid!",
          type: "is-success",
          position: "is-bottom"
        });
      }
      this.$toast.open({
        message: "Form is not valid! Please check the fields.",
        type: "is-danger",
        position: "is-bottom"
      });
    });
  },
  postItem() {
    alert("postItem function was called");
  }
}
</script>

Answer 1

您可以在 validateBeforeSubmite() 函数中调用提交函数

methods: {
  validateBeforeSubmit() {
    this.$validator.validateAll().then(result => {
      if (result) {
        this.$toast.open({
          message: "Form is valid!",
          type: "is-success",
          position: "is-bottom"
        });
       return this.postItem()// call your post function here and remove from @click in your submit button

      }
      this.$toast.open({
        message: "Form is not valid! Please check the fields.",
        type: "is-danger",
        position: "is-bottom"
      });
    });
  },
  postItem() {
    alert("postItem function was called");
  }
}