Vue/Laravel How to pass form from blade to vue to use checkValidity

Question

Made following button made by vue(single component).

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

Current problem is how to pass the form to vue to use checkValidity() method. laravel blade is the following type source code. if there is idea how to pass form from blade to vue, please help.

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

mshthn mshthn · Accepted Answer · 2018-01-16T18:53:59

What's the problem with this?

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

(Of course this would require to have this for as the only form on the page, so if you can, you should have an ID on the form and go for something like document.querySelector("#myForm01").checkValidity() instead.)

Vue/Laravel How to pass form from blade to vue to use checkValidity

1 Answers