Vue / Laravel如何将表单从刀片传递到Vue以使用checkValidity

Question

跟随vue（单个组件）制作的按钮。

<template>
  <div>
    <input type="submit" class="button_orange button_big" value="Register" v-show="!isSubmitting" @click="startSubmit">
    <div class="button_disable button_big" v-show="isSubmitting">Register</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        isSubmitting: false,
      };
    },
    methods: {
      startSubmit() {
        if (form.checkValidity()) {
          this.isSubmitting = true;
        }
      },
      reset() {
        this.isSubmitting = false;
      },
    },
  };
</script>

当前的问题是如何将表单传递给vue以使用checkValidity（）方法。 laravel blade是以下类型的源代码。 如果有想法如何将表单从刀片传递到Vue，请提供帮助。

<form>
  <input type="text" name="test">
  <submit-button></submit-button>
</form>

Answer 1

这是什么问题？

document.querySelector("form").checkValidity()

（当然，这需要将此作为页面上的唯一表单，因此，如果可以的话，您应该在表单上有一个ID，然后去寻找诸如document.querySelector("#myForm01").checkValidity()类的东西document.querySelector("#myForm01").checkValidity() ）